CSS中的动画详解
source link: https://blog.51cto.com/u_13349380/5567149
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS中的动画详解
原创CSS动画
常见动画效果:
animation: allIn 3s;
}
@keyframes allIn {
from {
width: 50px;
opacity: 0;
}
to {
width: 100px;
opacity: 1;
}
}
其中allIn
是自己定义的动画名称,3s
是动画执行的时间,animation
是调用自定义动画规则的CSS属性,@keyframe
用来定义动画的关键帧。动画效果的组成离不开动画名称、动画时间、animation属性和@keyframes规则。除此之外还有动画次数、动画顺序的控制等,但是这些元素都不是必需的。
animation属性是多个css属性的缩写,包括animation-name
、animation-duration
、animation-timing-function
、animation-delay
、animation-iteration-count
、animation-direction
、anitation-fill-mode
、和animation-play-state
。animation属性支持同时多个应用动画规则,可以实现元素淡出和右侧划入同时进行的动画效果。不推荐将所有的动画卸载一个动画规则中,可以设置分割多个独立的动画规则。
@keyframes
记住中重要的是后面带s
,很多人写的时候忘记了s
结尾,一个动画需要设置名称和定义关键帧列表,每个关键帧由关键帧选择器和对应的css样式共同组成的。其中关键帧选择器用来制定当前关键帧在整个动画过程中的位置,而且支持from
和to
两个关键字和百分比值。from
的关键字等同于0%
,to
关键字等同于100%
。
@keyframes
起止关键帧可以不设置,关键帧列表可以合并在一起书写,不同关键帧选择器是不分先后顺序的,关键帧如果重复定义,则不同的css样式是进行累加的,而相同的css样式是后面的样式覆盖前面的样式,这个和普通的css选择器的样式计算规则是一样的。不需要在@keyframes
规则语句中使用!important
提高权重,因为当css执行动画的时候,关键帧中定义的css优先级就是最高的,所以!important
会失效。
动画命名的名称可以有两种数据类型<custom-ident>
和<string>
, 其中<string>
数据类型需要带引号的字符串,<custom-ident>
数据类型的语法和css的标识符相似,区别就在于<custom-ident>
数据类型是区分大小写的,可以由任意字母、数字、短横线、下划线、转移字符、Unicode字符组成。<custom-ident>
不能是css属性本身支持的关键字,不能是十进制数字开头,可以使用短横线作为开头,但是短横线后面不能是十进制数字,除短横线和下划线之外的英文标点包括空格都需要转义。
animation-delay
可以让动画延时播放,但是需要注意的是,如果动画是无限循环的,设置的延迟就不会再循环。
reverse和alternate
animation-direction
属性可以用来控制动画的方向,意思就是通过控制@keyframes
规则中定义的动画关键帧执行的方向来实现的。默认值为normal
,还有reverse
、alternate
、alternate-reverse
,其中reverse
是让每一轮动画执行方向相反,alternate
是让下一轮动画的执行方向和上一轮动画的执行方向相反。
//animation动画执行了3次
animation allOut 2s 3;
}
@keyframes allOut {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
如果animation-direction的属性值为normal
,那么执行动画的方向是0%到100%、0%到100%,每一轮动画的方向都是正常的。如果animation-direction的属性值为reverse
,那么执行动画的方向是100%到0%、100%到0%,每一轮动画方向都是相反的。如果animation-direction的属性值是alternate
,那么执行动画的方向是0%到100%、100%到0%,每3n+1轮的动画方向是相反的。如果animation-direction的属性值是alternate-reverse
,那么动画执行的方向是100%到0%、0%到100%,每3n轮的动画方向是相反的。
通过上面我们可以得出,reverse
和alternat
e关键字的区别是让动画反向播放的轮数不同,从效果上看,alternate
关键字的动画效果表现为来回交替播放。reverse
可以用于图形的顺时针旋转或者图形的逆时针旋转。alternate
可以用于实现钟摆运动一类的动画效果。
alternate-reverse
关键字的作用是让动画第一次反向播放,然后来回不断播放,alternate-reverse
关键字不能写作reverse-alternate
。
animation-iternation-count
属性可以任意制定动画的次数,可以为小数。但是小数的应用场景很少。
infinite
表示无限,作用是让动画可以无限循环播放,可以用于加载动画,钟摆运动等效果。
animation-iteration-count
的属性值不能是负值,但是可以为0,表示动画一次也不播放。
forward和backwards
forwards
表示前进的意思,表示动画结束后,元素将应用当前动画结束时的属性值,而什么时候结束取决于animation-iteration-count
属性。
opacity: .3;
animation: allOut 3s 2s forwards;
}
@keyframes allOut {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
wrapper元素透明度会从0到1,变化过程:
1、过程是透明度从0.3保持2s。
2、透明度从0.3突然到0,然后透明度从0过渡到1,持续3s。
3、透明度一致保持为1。
backwards
表示后退的意思,表示动画开始之前,元素将应用当前动画第一轮播放的第一帧的属性值。backwards
取决于animation-direction
属性值。
css中的动画是可以暂停和重启的。使用animation-play-state
属性可以控制css动画的播放和暂停,其中running表示播放,paused表示暂停。只要设置animation-play-state
为paused就可以让一个正在播放的css动画暂停。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK