CSS3动画属性

animation 属性



animation-delay

​ 属性规定动画开始的延迟时间(2秒延时)

animation-delay: 2s;

​ 负值也是允许的。如果使用负值,则动画将开始播放,如同已播放 N 秒

animation-delay: -2s;



animation-iteration-count

​ 属性指定动画应运行的次数

		` animation-iteration-count: 3;`

​ 使用值 "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

​ CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
  • forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。
  • backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
  • both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。



//使用简写属性,将动画与 div 元素绑定:

div

{

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

}



//动画帧

 @keyframes mymove {

​          50% {transform-origin: 0 0 0;transform: rotate(360deg);background-color: rgb(83, 83, 90);}

​        

​        }

## 动画可用属性