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

不念不忘少年蓝@ 2023-02-17 02:13 2阅读 0赞

**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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
**3.CSS3 过渡（也称transition补间动画）**

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

**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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611155452637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200611160716524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70