CSS(五)：动画

原创: 2016-08-18 08:58:01 943浏览

animation-name

动画名称
语法：animation-name：none|
元素所定义的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。

@keyframes

语法：
@keyframes {
[from|to|]{sRules}[,*]
}
被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

1 /*定义一个名为"fromLeftToRight"的向右移动的动画*/
2 @keyframes fromLeftToRight{
3     from{margin:0;}
4     to{margin:100px;}
5 }

animation-duration

设置动画的持续时间
语法：animation-duration:[,]*

1 /*给div一个名为"fromLeftToRight"的动画效果，并持续一秒时间*/
2 div{
3     animation-name：fromLeftToRight；
4     animation-duration：1s;
5 }

animation-timing-function

动画的过渡速度类型
语法：animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

1 /*给div一个名为"fromLeftToRight"的动画效果，持续一秒时间，并且过渡类型为ease-in*/
2 div{
3     animation-name：fromLeftToRight；
4     animation-duration：1s;
5     animation-timing-function:ease-in;
6 }

animation-delay

设置动画的延迟时间
语法：animation-delay: [,]*

1 /*给div一个名为"fromLeftToRight"的动画效果，延迟一秒后执行*/
2 div{
3     animation-name：fromLeftToRight；
4     animation-duration：1s;
5     animation-timing-function:ease-in;
6     animation-delay: 1s;
7 }

animation-iteration-count

设置动画的执行次数
语法：animation-iteration-count: infinite|
infinite表示无限次数

1 /*给div一个名为"fromLeftToRight"的动画效果，执行两次后停止*/
2 div{
3     animation-name：fromLeftToRight；
4     animation-duration：1s;
5     animation-timing-function:ease-in;
6     animation-iteration-count: 2;
7 }

animation-direction

设置动画在循环中是否按照相反顺序执行
语法：animation-direction: normal|reverse|alternate|alternate-reverse
说明：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

1 /*给div一个名为"fromLeftToRight"的动画效果，并且反复运行*/
2 div{
3     animation-name：fromLeftToRight；
4     animation-duration：1s;
5     animation-timing-function:ease-in;
6     animation-iteration-count: infinite;
7     animation-direction: alternate;
8 }

animation-fill-mode

设置动画开始结束的状态
语法：animation-fill-mode: none|forwards|backwards|both
说明：
none：默认值。不设置动画的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态

1 /*给div一个名为"fromLeftToRight"的动画效果，并且动画结束后元素位于动画结束时的位置*/
2 div{
3     animation-name：fromLeftToRight；
4     animation-duration：1s;
5     animation-timing-function:ease-in;
6     animation-iteration-count: 3;
7     animation-fill-mode: forwards;
8 }

animation-play-state

设置动画的播放状态
语法：animation-play-state: running|paused

 1 /*给div一个名为"fromLeftToRight"的动画效果，并且当div处于hover状态时暂停动画*/
 2 div{
 3     animation-name：fromLeftToRight；
 4     animation-duration：1s;
 5     animation-timing-function:ease-in;
 6     animation-iteration-count: infinite;
 7 }
 8 div:hover{
 9     animation-play-state: paused;
10 }

animation

动画的简写属性
语法：
animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || || [ ,*]

CSS(五)：动画 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：html中相似的标签、属性的区别下一条：CSS使用自定义光标样式-遁地龙卷风