动画

动画

1、关键帧：

（1）表示符keyframs:

(2)语法结构（0%-100%）

@keyframsNAME{0%{CSS样式{

color:red;

}

}10%{CSS样式{

}

}

}

2、animation与transition:

不同点，动画不用出发；

相同点：都可以通过时间改变css样式属性

3、常用属性；

animaton-name：给动画起个名称；

animaton-duration：设置动画持续周期；

animaton-timing-function：

设置速率：

1，ease 逐渐变慢

2，linear 匀速运动

3，ease-in 加速

4，ease-out 减速

5，ease-in-out 先加速后减速

6，cubic-bezier 贝塞尔曲线 自定义时间曲线

（x1,y1,x2,y2)四个值两个点【0-1】

animation-delay:延迟。

animaiton-iteration-count：动画执行次数：默认一次，infinite（无限大）

animation-play-state:

用来控制动画播放状态；

running（启动）和paused(暂停);

animation-direction：播放方向