CSS3 transition动画、CSS3 transform变换、CSS3 animation动画

CSS3 transition动画:

1、transition-property 设置过渡的属性

2、transition-duration  设置过渡的时间

3、transition-timing-function  设置过渡的运动方式

inear 匀速

ease 开始和结束慢速 

ease-in 开始是慢速 

ease-out 结束时慢速 

ease-in-out 开始和结束时慢速 

cubic-bezier(n,n,n,n) 

4、transition-delay 设置动画的延迟

5、transition: property duration timing-function delay 同时设置四个属性

CSS3 transform变换：

1、translate(x,y) 设置盒子位移

2、scale(x,y)  设置盒子缩放

3、rotate(deg) 设置盒子旋转

4、skew(x-angle,y-angle) 设置盒子斜切

5、perspective  设置透视距离

6、transform-style  flat | preserve-3d 设置盒子是否按3d空间显示

7、translateX、translateY、translateZ  设置三维移动

8、rotateX、rotateY、rotateZ  设置三维旋转

9、scaleX、scaleY、scaleZ  设置三维缩放

10、tranform-origin  设置变形的中心点

11、backface-visibility 设置盒子背面是否可见

CSS3 animation动画：

1、@keyframes 定义关键帧动画

2、animation-name 动画名称

3、animation-duration  动画时间

4、animation-timing-function  动画曲线

linear  匀速 

ease 开始和结束慢速 

ease-in 开始是慢速 

ease-out 结束时慢速 

ease-in-out 开始和结束时慢速 

steps 动画步数 

5、animation-delay  动画延迟

6、animation-iteration-count  动画播放次数  n|infinite

7、animation-direction

normal  默认动画结束不返回 

Alternate 动画结束后返回 

8、animation-play-state  动画状态 

paused 停止

running  运动