一、CSS3 transition动画
transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。
属性参数：
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式
- linear 匀速
- ease 开始和结束慢速
- ease-in 开始是慢速
- ease-out 结束时慢速
- ease-in-out 开始和结束时慢速
- cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲线设置网站：https://matthewlein.com/ceaser/
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
举例：
<style type="text/css"> ???????.box{ ???width:100px; ???height:100px; ???background-color:gold; ???transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms; ???????????}.box:hover{ ???width:300px; ???height:300px; ???background-color:red;}</style>......<div class="box"></div>
二、CSS3 transform变换
css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性，transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，如果将一个元素旋转45度，它实际上是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。
属性参数：
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 设置盒子背面是否可见
举例：（翻面效果）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>翻面</title> ???<style type="text/css"> ???????.box{ ???????????width:300px; ???????????height:272px; ???????????margin:50px auto 0; ???????????transform-style:preserve-3d; ???????????position:relative; ???????????????????} ???????.box .pic{ ???????????width:300px; ???????????height:272px; ???????????position:absolute; ???????????background-color:cyan; ???????????left:0; ???????????top:0; ???????????transform:perspective(800px) rotateY(0deg); ???????????backface-visibility:hidden; ???????????transition:all 500ms ease; ???????} ???????.box .back_info{ ???????????width:300px; ???????????height:272px; ???????????text-align:center; ???????????line-height:272px; ???????????background-color:gold; ???????????position:absolute; ???????????left:0; ???????????top:0; ???????????transform:rotateY(180deg); ???????????backface-visibility:hidden; ???????????transition:all 500ms ease; ???????????????????} ???????.box:hover .pic{ ???????????transform:perspective(800px) rotateY(180deg); ???????} ???????.box:hover .back_info{ ???????????transform:perspective(800px) rotateY(0deg); ???????} ???</style></head><body> ???<div class="box"> ???????????????<div class="pic"><img src="images/location_bg.jpg"></div> ???????<div class="back_info">背面文字说明</div> ???</div></body></html>
三、CSS3 animation动画
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。transition必须使用触发器触发，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 运动
9、animation-fill-mode 动画前后的状态
- none 不改变默认行为
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
- backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
- both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
举例：（人物走路动画）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>走路动画</title> ???<style type="text/css"> ???????????????.box{ ???????????width:120px; ???????????height:180px; ???????????border:1px solid #ccc; ???????????????????????margin:50px auto 0; ???????????position:relative; ???????????overflow:hidden; ???????????????????} ???????.box img{ ???????????display:block; ???????????width:960px; ???????????height:182px; ???????????position: absolute; ???????????left:0; ???????????top:0; ???????????animation:walking 1.0s steps(8) infinite; ???????????????????} ???????@keyframes walking{ ???????????from{ ???????????????left:0px; ???????????} ???????????to{ ???????????????left:-960px; ???????????} ???????} ???</style></head><body> ???<div class="box"><img src="images/walking.png"></div></body></html>动画中使用的图片如下：
CSS3 transition动画、transform变换、animation动画
原文地址：https://www.cnblogs.com/ruanchunyi/p/9903497.html