今日学习animation的属性
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timimg-function
- animation-fill-mode
- animation-play-state
@keyframes规则
- @keyframes中指定某动画（动画名字）的css样式
@keyframes指定了动画名是scaleAnimation的动画效果是放大缩小放大缩小
- 还有官网实例中，通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成））设置样式改变
animation-name
就是给你做动画的元素起个名字，对应这个名字做效果，可参见上面的例子，scaleAnimation和example就是两个不同的动画名，@keyframes+动画名，就对应了相应的动画名独自的动画效果
animation-duration
动画从开始到结束要用多少秒，此值必须设置,且不能为0，否则不显示动画
还是这列子，就是从红色变黄色再变蓝色最后变蓝色的过程一共需要4s
animation-delay
动画开始的延迟时间。参数可是正值或者负值
-
以官方例子为主， animation-delay: 2s;就是等待2s以后再开始动画效果，从第一个红色开始
-
animation-delay: -2s; 就是已经开始了2s，直接从2s以后开始，出来的效果就是，直接从蓝色开始变绿色变红色结束
animation-iteration-count：n/infinite
n 动画效果运行多少次 infinite 动画永远运行：
animation-direction
指定是向前播放、向后播放还是交替播放动画。
normal- 动画正常播放（向前）。默认值reverse- 动画以反方向播放（向后）alternate- 使动画先向前运行，然后向后运行alternate-reverse- 使动画先向后运行，然后向前运行
animation-timing-function
- ease 开始慢速，中间加快，结束慢速 （默认）
- linear 匀速
- ease-in 开始慢速
- ease-out 结束慢速
- ease-in-out 开始和结束均慢速
- cubic-bezier(n,n,n,n) 贝塞尔函数中定义自己的值
animation-fill-mode：
tip:这个属性，不李姐，看了效果图也没啥感觉
animation-play-state: paused|running;
- paused -暂停
- running -播放
animation简写
div {
animation: example 5s linear 2s infinite alternate;
}
div {
animation: animation-name,animation-duration,animation-timing-function,animation-delay,
animation-iteration-count,animation-direction
}
