CSS中2D、3D和动画(transition补间动画、keyframe关键帧动画和逐帧动画）简介

1.2D转换

2D/3D转换属性transform，2D变换方法包括：translate（平移）、rotate（旋转）、scale（缩放）、skew（倾斜）、matrix

2.3D转换

2D/3D转换属性transform，3D变换方法包括：

• translateX（以方框X轴，从下向上旋转）
• translateY（以方框y轴，从左向右旋转）
• translateZ（以方框中心为原点，顺时针旋转）
• rotateX（从左向右移动）
• rotateY（从上向下移动）
• rotateZ（以方框中心为原点，变大）
• scaleX（缩放，以方框Y轴，左右变宽）
• scaleY（缩放，以方框X轴，上下变高）
• scaleZ（缩放，看不出变换。scaleZ()和scale3d()函数单独使用时没有任何效果。）

具体效果转换效果可以参考：
https://www.cnblogs.com/tyblwmbs/p/10909816.html

下表列出了所有的转换属性：

3.CSS3 过渡（也称transition补间动画）

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间

//多项改变

4.CSS3动画（keyframe关键帧动画）

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

关键帧动画相当于多个补间动画

5.逐帧动画

逐帧动画是关键帧动画的一种特殊用法，也是多个帧，但是没有补间。

适用于无法补间计算的动画。

使用steps()这个值实现。

逐帧动画适用于动画时长比较短、图片不是很大的场景。

实现逐帧动画需要两个条件：
（1）相关联的不同图像，即动画帧；
（2）连续播放。

可以参考笔记：
https://blog.csdn.net/u014465934/article/details/88773521
https://www.cnblogs.com/Fengzp/p/5548493.html