CSS过渡和动画
一.过渡
创新互联专业为企业提供阳春网站建设、阳春做网站、阳春网站设计、阳春网站制作等企业网站建设、网页设计与制作、阳春企业网站模板建站服务,十载阳春做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
1.定义:将CSS的属性值在一段时间内平缓变化的过程给体现出来;
2.指定过渡属性
2.1作用:指定哪个或者哪几个属性值,在变化时需要使用过渡效果来体现;
2.2属性:transition-property取值:属性名 例子:transition-property:background;
2.3注意:允许设置过渡效果的属性如下
颜色属性,取值为数字的属性,转换属性(transform),渐变属性,阴影属性,visibility属性
3.指定过渡时长
3.1作用:指定在多长时间内完成过渡操作
3.2 属性:transition-duration 取值:s/ms
4.指定过渡速度时间函数
4.1属性 transition-timing-function
4.2取值:(1)默认值,ease表示慢速开始快速变化 慢速结束(2)linear匀速(3)ease-in 慢速开始 匀速结束(4)ease-out 快速开始慢速结束(速率与1不同)(5)ease-in-out 慢速开始和结束
5.指定过渡延迟时间 transition-delay:时间
6.过渡的编写位置
6.1允许将过渡属性编写在元素声明的样式中;
6.2 触发过渡效果样式中(hover)
二.动画
1.定义:使元素从一种样式逐渐变化为另一种样式,动画是复杂的过渡效果。动画是通过关键帧来控制动画的每一步。
关键帧:在某个时间点上,元素的状态和样式是怎样的。
2.动画的使用步骤:
2.1声明动画:
@keyframes 动画名称{
/* 定义该动画中所有的关键桢*/
0%{动画开始时的样式}
100{动画结束时的样式}
}
3.动画属性
3.1 animation-name 指定动画的名称
3.2 animation-duration 指定动画执行的一个周期的时长
3.3animation-timing-function
3.4 animation-delay
3.5animation-iteration-count 作用:指定动画的播放次数;取值:1.具体数值;2.infinite 无限次
3.6.animation-direction 指定动画的播放方向;normal 正常播放 alternate轮流播放,偶数次时正向播放,奇数次时逆袭播放
动画的简洁写法:animation: name duration timing-function delay iteration-countdirection
3.7 animation-fill-mode
定义:规定动画在播放前和播放后的状态;
取值:3.7.1 none:默认行为 不改变;3.7.2 forwards当动画完成后,保持在最后一个帧的状态上;3.7.3 backwards 在动画播放前的延迟时间内,动画将保持在第一帧的状态;3.7.4 both: forwards+backwards
3.8 animation-play-state:指定动画的播放状态
取值:pasuse 动画暂停;running: 动画播放
本文题目:CSS过渡和动画
网页链接:http://myzitong.com/article/gcddje.html