CSS3中的 transform （变形）+Transition(转换) = animation（动画）

 transform （变形）

包括：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

transition主要包含五个属性值：

transform: rotate | scale | skew | translate |matrix;

transform:rotate(45deg);围绕中心旋转角度

transform-origin：left top 修改旋转中心（默认就是中心点） {left top right bottom}

transform:translate(x,y) 位移距离 translateX(x)  translateY(y){三种位移方式}

transform:scale(x,y) 缩放大小 以图形中心点缩放，通过transform-origin设置以某点缩放  transform:scaleX(x) 水平方向缩放 transform:scaleY(y) 垂直方向缩放

transform:skew(10deg,10deg)  一中心点为基点扭曲图像  transform:skewX() 水平方向扭曲      transform:skewY() 垂直方向扭曲

transform:matrix; 矩阵。

transition主要包含四个属性值：

执行变换的属性：transition-property；

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。

变换延续的时间：transition- duration；

transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒)

在延续时间段，变换的速率变化transition-timing-function

transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值

2、linear：（匀速），linear 函数

3、ease-in：(加速)，ease-in 

4、ease-out：（减速），ease-out 

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线）贝塞尔曲线。

 

变换延迟时间transition- delay

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果

animation主要包含七个属性值：

animation-name: 动画名称；和@keyframes相关联。

animation-duration：

animation-duration是用来指定元素播放动画所持续的时间长(这个属性跟transition中的transition-duration使用方法是一样的)

animation-timing-function:

animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。

animation-delay:

animation-delay:是用来指定元素动画开始时间。这个属性和transition-delayy使用方法是一样的。

animation-iteration-count

animation-iteration-count是用来指定元素播放动画的循环次数，默认值为“1”；infinite为无限次数循环。

animation-direction

animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

animation-play-state

animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。

转载于:https://www.cnblogs.com/webdugui/p/3656158.html