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);//缩放（宽，高）

}

效果如下：

（颜色在变化）