css3 animation(动画)属性
![](https://i-blog.csdnimg.cn/blog_migrate/7045016d6188d725643771542e4e04d6.png)
1.animation: name duration timing-function delay iteration-count direction fill-mode play-state(所有属性集合)
2.animation-name属性值:绑定动画名(@keyframes名)
3.animation-duration属性值:time。(5s)
4.animation-timing-function属性值:
- linear--------速度均匀(默认)
- ease-------低速加快变慢
- ease-in-------低速开始
- ease-out--------低速结束
- ease-in-out-------低速开始结束
- cubic-bezier(n,n,n,n)-------0-1数值自己定义
6.animation-iteration-count属性值:
- n-------次数(默认1次)
- infinite-------无限(永远)
7.animation-direction属性值:
- normal-------正常播放
- reverse-------反向播放
- alternate-------奇数次正向播,偶数次反向播
- alternate-reverse-------奇数次反向播,偶数次正向播
- initia-------默认属性
- inherit-------从父级继承
8.animation-play-state属性值:
- paused-------暂停
- running-------正在运行
配合@keyframes使用
语法如下
//1.也可以写成这样
@keyframes
mymove
{
from
{
top:
0px
;}
to
{
top:
200px
;}
}
//2.也可以写成这样
@keyframes
mymove
{
0%
{
top:
0px
;}
25%
{
top:
200px
;}
50%
{
top:
100px
;}
75%
{
top:
200px
;}
100%
{
top:
0px
;}
}
小例子:(以改变宽度为例)
.div1
{
width:
20px
;
height:
20px
;
margin:
100px
auto
;
background:
#ccc
;
animation:
mymove
5s
;
}
/* 规定动画。 */
@keyframes
mymove
{
0%
{
width:
20px
;}
25%
{
width:
200px
;}
50%
{
width:
100px
;}
75%
{
width:
200px
;}
100%
{
width:
20px
;}
}