css3用到知识点小结

属性	默认值	属性值及其描述
animation-name	默认值：none	规定需要绑定到选择器的 keyframe 名称。 keyframename 规定需要绑定到选择器的 keyframe 的名称。 none 规定无动画效果（可用于覆盖来自级联的动画）。
animation-duration	默认值：0	规定完成动画所花费的时间，以秒或毫秒计。 time 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
animation-timing-function	默认值：ease	规定动画的速度曲线。 linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay	默认值：0	规定在动画开始之前的延迟。 time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。
animation-iteration-count	默认值：1	规定动画应该播放的次数。 n 定义动画播放次数的数值。 infinite 规定动画应该无限次播放。
animation-direction	normal|alternate	规定是否应该轮流反向播放动画。 normal 默认值。动画应该正常播放。 alternate 动画应该轮流反向播放。

简单例子：

<p className='second'>animation以及transform的使用</p>

 

.second{

color: #fff;

background-color: #fac;

animation:myfirst 5s infinite;

margin-top:60px;

transform:rotate(9deg);//倾斜（角度）

// transform: translate(10px,20px);//位移（x,y）

// transform: scale(2,1.5);//缩放（宽，高）

}

效果如下：

（颜色在变化）