前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）

news2024/11/16 20:27:24

在CSS的世界里，存在着多种能体现动画效果的属性：CSS transform、CSS Transition 和 CSS Animation。让开始接触CSS的同学感到困惑。要搞清楚CSS的动画，我们就必须先把这几种属性做一下区别。

CSS transform 属性、CSS Transition 属性、 CSS Animation 属性的区别

CSS transform （形变）CSS transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

CSS Transition （过渡）很多网站都把这个属性翻译成过渡，也有人把它翻译成 补间。为什么这样呢？因为它的原理是：设置关键帧的初始状态，然后在另一个关键帧改变这个状态，比如大小、颜色、透明度、位置等，浏览器将自动根据二者之间帧的值创建的过渡效果。这明显动起来的东西，W3C并不认为它是动画。大概因为它无法管理过渡的中间过程。

CSS Animation（动画）我私下觉得，这个可能才是W3C组织在定义CSS规则时候认可的动画，采用关键帧方式创建和管理动画，甚至可以完全控制每一段动画的表现。它既可以实现 补间动画 的动画效果，也可以使其以 逐帧动画 的方式进行绘制。

现在，我们总结一下上述三种动画的区别：transform形变 和 Transition过渡，都是不必通过 @keyframes 创建的。我们可以通过它们改变CSS元素的样式，使他们看上去变化甚至运动起来。而 Animation（关键帧动画），是CSS最核心的动画属性。

接下来，让我们通过实例，一步步去详细了解这三种属性。

CSS transform （形变）

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

提供了一些css 函数来进行使用

  • 平移：translate(x, y)
  • 缩放：scale(x, y)
  • 旋转：rotate(deg)
  • 倾斜：skew(deg, deg)

CSS transform 语法：

transform: none|transform-functions;

transform 可以设置多个函数组合用空格隔开，举个例子

transform: translate(-50%,-50%) scale(0.5) rotate(45deg);

上述代码的作用：沿x轴(向左)，Y轴(向上)平移div的位置为自身高度和宽度的50%（使得div与其父元素的中心点重合，实现垂直居中对齐），同时，缩小div的大小为原来的50%，并且顺时针旋转45deg。

我们通过一张平面直角坐标系的图，更容易理解2D转换。请你在学习2d转换的过程中，牢牢记住这张图。

现在，你已经掌握了 transform 的基本语法。现在我们看一看它的具体应用。

CSS 2D 转换

CSS 2D转换属性

transform

向元素应用 2D 或 3D 转换。

transform-origin

允许你改变被转换元素的位置。

使用 CSS transform 属性，你可以使用下面这些2D 转换方法：translate()、rotate()、scaleX()、scaleY()、scale()、skewX()、skewY()、skew()、matrix()

translate() 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

.box{
  background: #ffc;
  width: 100px;
  height: 100px;
  border:1px solid #000;
  box-sizing: border-box;
  cursor: pointer;
}
.box:hover{
  transform: translate(100px);
}

上面的例子，我们先定义了一个div，让鼠标悬浮到div上面时，这个div将发生移动：从其当前位置向右移动100 像素。

效果虽然很简陋，但这就是这行代码产生的效果。此外，还可以使用translateX()和translateY()分别控制元素在X轴和Y轴上的移动，你也可以通过下面这样的代码，将元素向右移动100px并向下移动200px。

transform: translate(100px, 200px)
rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把 div 元素顺时针旋转 20 度（使用负值将逆时针旋转元素。）：

.box:hover{ transform: rotate(20deg);/* 顺时针旋转 */ }

通过上述案例，我们可以知道，div静止的初始角度为0，旋转的中心是div的中心。那么，若你将角度设置为360deg，你猜猜会发生什么？

scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

下面的例子把 div 元素增大为其原始宽度的两倍和其原始高度的三倍：

.box:hover{ transform: scale(2, 3); }

通过上面案例，你是否发现，放大缩小的中心点也是原来div元素的中心点。

scaleX() 方法

scaleX() 方法增加或减少元素的宽度。让我们想想，如果我要将宽度增加原来的div宽度的一倍，应该怎么写呢？100% 还是200%？

.box:hover{ transform: scaleX(2); /* transform: scaleX(200%); */ }

经过测试，我们发现

transform: scaleX(2);

与

 transform: scaleX(200%);

的效果是一样的。这说明，scaleX()方法，与大多数 CSS方法一样，同时支持 百分比写法。

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把 div 元素增大到其原始高度的三倍：

.box:hover{ transform: scaleY(3); }

skewX() 方法

skewX() 方法使元素沿 X 轴 倾斜 给定角度。

下例把 div 元素沿X轴倾斜 20 度：

.box:hover{ transform: skewX(20deg); }

能想象出倾斜是什么样子吗？

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把 div 元素沿 Y 轴倾斜 20 度：

.box:hover{ transform: skewY(20deg); }

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 div 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

.box:hover{ transform: skew(20deg,10deg); }

需要提醒注意的是，如果你使用 skew()方法时，仅写了一个值。如下：

.box:hover{ transform: skew(20deg); }

你猜猜会发生什么？会是X轴，Y轴同时倾斜20度吗？哈哈，想太多了 ！ W3C告诉你：如果未指定第二个参数，则值为零。因此，上面例子只能 使 div 元素沿 X 轴倾斜 20 度：

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

我们不做多解释，先举个例子：

.box:hover{ transform: matrix(2, -0.3, 0, 1, 10, 50); }

好了，基本的2D变换属性都学完了。下面列表是对2D转换方法的总结：

函数

描述

matrix(n,n,n,n,n,n)

定义 2D 转换，使用六个值的矩阵。

translate(x,y)

定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n)

定义 2D 转换，沿着 X 轴移动元素。

translateY(n)

定义 2D 转换，沿着 Y 轴移动元素。

scale(x,y)

定义 2D 缩放转换，改变元素的宽度和高度。

scaleX(n)

定义 2D 缩放转换，改变元素的宽度。

scaleY(n)

定义 2D 缩放转换，改变元素的高度。

rotate(angle)

定义 2D 旋转，在参数中规定角度。

skew(x-angle,y-angle)

定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle)

定义 2D 倾斜转换，沿着 X 轴。

skewY(angle)

定义 2D 倾斜转换，沿着 Y 轴。

CSS 3D 转换

什么是3D转换，它和2D转换有什么不同？

我用一副图回答你！

看明白了吧。3D的转换，多了一个维度。下面是上述两个div的转换代码：

.box:hover{ 
    transform: rotate(360deg);/* 2D */ 
} 
.box2:hover{ 
    transform: rotateX(360deg);/* 3D */ 
}

同样是360度旋转，却产生了不同的效果。2D，就永远停留在屏幕的这个平面维度上。

CSS 3D 转换属性

下表列出了所有 3D 变换属性：

属性

描述

支持

transform

向元素应用 2D 或 3D 转换。

2D，3D

transform-origin

允许你改变被转换元素的位置。

2D，3D

transform-style

规定被嵌套元素如何在 3D 空间中显示。

3D

perspective

规定 3D 元素的透视效果。

3D

perspective-origin

规定 3D 元素的底部位置。

3D

backface-visibility

定义元素在不面对屏幕时是否可见。

3D

对比2D的转换属性，我们可以看到。3D转换新增了几个转换属性。后面我们在做讨论。现在让我们先把重点放到转换方法上。

通过 CSS transform 属性，您可以使用以下 3D 转换方法：rotateX()、rotateY()、rotateZ()。

rotateX()方法

rotateX() 方法使元素绕其 X 轴旋转给定角度：

.box2:hover{ transform: rotateX(360deg);/* 3D */ }

rotateY()方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

.box2:hover{ transform: rotateY(360deg);/* 3D */ }

rotateZ()方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

.box2:hover{ transform: rotateZ(360deg);/* 3D */ }

意外吧？rotateZ 居然跟 rotate得到了同样的结果，为什么这样呢？其实，当你把X轴，Y轴，Z轴的空间感建立之后，你就明白了。如果X轴是平行与我们的浏览器屏幕的水平方向，Y轴是平行于浏览器的垂直方向，那么Z轴呢？它是垂直于屏幕的一条轴。所以，rotateZ理所当然的就是围绕z轴为中心在旋转了。它已经脱离了二维的平面。

参考上图，可以很好的理解CSS3D

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1919629.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FL Studio21.5.3.21中文版破解安装包！音乐制作新神器，让创意无限飞扬！

FL Studio21.5.3.21中文版破解安装包！音乐制作新神器，让创意无限飞扬！

🎶 音乐制作，轻松入门！FL Studio21中文版本体验分享 嘿！各位音乐小能手和创作小白们，今天我要给大家安利一个超酷炫的音乐制作软件——FL Studio21中文版！🎉 FL Studio21汉化版下载网盘链接: …
阅读更多...
Python函数 之 模块和包---练习

Python函数 之 模块和包---练习

题目 1 1.定义一个模块 toolls.py , 定义函数实现对两个数据进行加法操作的函数 add_2_num ，并返回相加之和的结 果； 再定义一个实现对三个数据进行加法操作的函数 add_3_num ，并返回相加之和的结果； 2.最后新定义一个代码文件 …
阅读更多...
AutoMQ vs Kafka: 来自小红书的独立深度评测与对比

AutoMQ vs Kafka: 来自小红书的独立深度评测与对比

测试背景 当前小红书消息引擎团队与 AutoMQ 团队正在深度合作，共同推动社区建设，探索云原生消息引擎的前沿技术。本文基于 OpenMessaging 框架，对 AutoMQ 进行了全面测评。欢迎大家参与社区并分享测评体验。 01 测试结论 本文主要测评云…
阅读更多...
JavaDS —— 单链表 与 LinkedList

JavaDS —— 单链表 与 LinkedList

顺序表和链表区别 ArrayList ： 底层使用连续的空间，可以随机访问某下标的元素，时间复杂度为O（1） 但是在插入和删除操作的时候，需要将该位置的后序元素整体往前或者向后移动，时间复杂度为O&…
阅读更多...
二分查找算法——部分OJ题详解

二分查找算法——部分OJ题详解

目录 关于二分查找算法 部分OJ题详解 704.二分查找 一，分析题目 二，细节处理 三，题目代码 四，*总结朴素模板 *34.在排序数组中查找元素的第一个和最后一个位置 一，查找左端点 二，处理左端点细…
阅读更多...
ts实现将相同类型的数据通过排序放在一起

ts实现将相同类型的数据通过排序放在一起

看下效果&#xff0c;可以将相同表名称的字段放在一起 排序适用于中英文、数字 // 排序 function sortByType(items: any) {// 先按照类型进行排序items.sort((a: any, b: any) > {if (a.label < b.label) return -1;if (a.label > b.label) return 1;return 0;});r…
阅读更多...
【记录】LaTex｜LaTex调整算法、公式、表格内的字体大小（10种内置字号）

【记录】LaTex｜LaTex调整算法、公式、表格内的字体大小（10种内置字号）

文章目录 【记录】LaTex&#xff5c;LaTex调整算法、公式、表格内的字体大小&#xff08;10种内置字号&#xff09;省流版1 字体大小2 测试代码 详细版1 \tiny2 \scriptsize3 \footnotesize4 \small5 \normalsize6 \large7 \Large8 \LARGE9 \huge10 \Huge 【记录】LaTex&#x…
阅读更多...
实验02 黑盒测试（组合测试、场景法）

实验02 黑盒测试（组合测试、场景法）

1. 组合测试用例设计技术 指出等价类划分法和边界值分析法通常假设输入变量相互独立&#xff0c;但实际情况中变量间可能存在关联。全面测试&#xff1a;覆盖所有输入变量的所有可能组合&#xff0c;测试用例数量随输入变量的增加而指数增长。 全面测试需要对所有输入的各个取…
阅读更多...
Geoserver源码解读六 插件

Geoserver源码解读六 插件

系列文章目录 Geoserver源码解读一 环境搭建 Geoserver源码解读二 主入口 Geoserver源码解读三 GeoServerBasePage Geoserver源码解读四 REST服务 Geoserver源码解读五 Catalog Geoserver源码解读六 插件&#xff08;怎么在开发模式下使用&#xff09; 目录 系列文章目…
阅读更多...
ubuntu计划任务反弹

ubuntu计划任务反弹

目录 实验环境 实验步骤 目标主机构造任务计划 构造语句 语句解释 kali开启监听 监听成功 问题 原因 实验环境 攻击者 操作系统&#xff1a;kali IP&#xff1a;192.168.244.141 目标主机 操作系统&#xff1a;ubuntu IP&#xff1a;192.168.244.151 实验步骤 目…
阅读更多...
CSS 中的 ::before 和 ::after 伪元素

CSS 中的 ::before 和 ::after 伪元素

目录 一、CSS 伪元素 二、::before ::after 介绍 1、::before 2、::after 3、content 常用属性值 三、::before ::after 应用场景 1、设置统一字符 2、通过背景添加图片 3、添加装饰线 4、右侧展开箭头 5、对话框小三角 6、插入icon图标 一、CSS 伪元素 CSS伪元…
阅读更多...
数据库使用SSL加密连接

数据库使用SSL加密连接

简介 数据库开通SSL加密连接是确保数据传输过程中安全性的关键措施&#xff0c;它通过加密数据、验证服务器身份、保护敏感信息、维护数据完整性和可靠性&#xff0c;同时满足行业标准和法规要求&#xff0c;进而提升用户体验和信任度&#xff0c;为企业的数据安全和业务连续性…
阅读更多...
做工和音质都堪称典范！悠律Ringbuds pro耳机动感低音享受

做工和音质都堪称典范！悠律Ringbuds pro耳机动感低音享受

想要长时间佩戴舒适&#xff0c;又要听歌看电影音质好&#xff0c;还想户外运动时不影响听到环境声音&#xff0c;开放式毋容置疑是最好的选择&#xff0c;像我每天坐地铁上下班的时候都会习惯戴耳机&#xff0c;但以前戴入耳式耳机的时候经常会错过站点&#xff0c;耽误了不少…
阅读更多...
TREK高压功率放大器维修trek高压电源609E-6

TREK高压功率放大器维修trek高压电源609E-6

美国Trek维修产品包括&#xff1a;高压放大器、电源、静电电压表、高压功能发生器、放大器、静电测量仪、荷电板、信号放大器、高压电源、功率放大器、高压功能发生器、高压放大器、接触电压表、非接触式电压表、板载控制器、ESD和传感器、ESD电压表、带电板、电离器、表面电阻…
阅读更多...
HashMap----源码解读

HashMap----源码解读

源码分析&#xff1a; public class HashMap<K,V> extends AbstractMap<K,V>implements Map<K,V>, Cloneable, Serializable 在类的开头声明了几个常量&#xff0c;以下是较为重要的&#xff1a; /*** 定义初始容量大小为16*/ static final int DEFAULT_I…
阅读更多...
【射频器件供应】 Marki Microwave

【射频器件供应】 Marki Microwave

射频、微波和毫米波组件 裸片、表面贴装、连接器和波导 直流至Sub-THz Marki Microwave通过创建强大的性能突破性射频和微波组件产品组合&#xff0c;解决了业界最棘手的技术问题。Marki Microwave 成立于 1991 年&#xff0c;以开发业内最好的混频器为目标&#xff0c;如今已…
阅读更多...
kaggle提交csv文件

kaggle提交csv文件

使用colab完成实验后 将要提交的csv文件拖到kaggle网站自己加入的competition就行 如果kaggle网站无法注册&#xff0c;往往是人机验证问题&#xff1a; kaggle网站验证
阅读更多...
6-5，web3浏览器链接区块链（react+区块链实战）

6-5，web3浏览器链接区块链（react+区块链实战）

6-5&#xff0c;web3浏览器链接区块链&#xff08;react区块链实战&#xff09; 6-5 web3浏览器链接区块链&#xff08;调用读写合约与metamask联动&#xff09; 6-5 web3浏览器链接区块链&#xff08;调用读写合约与metamask联动&#xff09; 这里就是浏览器端和智能合约的交…
阅读更多...
语言模型演进：从NLP到LLM的跨越之旅

语言模型演进：从NLP到LLM的跨越之旅

在人工智能的浩瀚宇宙中&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是一个充满挑战和机遇的领域。随着技术的发展&#xff0c;我们见证了从传统规则到统计机器学习&#xff0c;再到深度学习和预训练模型的演进。如今&#xff0c;我们站在了大型语言模型&#xff…
阅读更多...
【最经典的79个】软件测试面试题（内含答案）提前备战“金九银十”

【最经典的79个】软件测试面试题（内含答案）提前备战“金九银十”

001.软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试用例 用例编号 测试项目 测试标题 重要级别 预置条件 输入数据 执行步骤 预期结果 0002.问&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023