CSS3 动画详解
1.基本概念
CSS3 动画允许您通过定义关键帧和一系列动画属性，在网页上创建动态的视觉效果。与传统的 JavaScript 动画相比，CSS3 动画更易于编写和维护，并且在性能方面也有不错的表现。它可以应用于 HTML 元素，使元素在页面上移动、旋转、缩放、淡入淡出等。
关键帧（@keyframes）
2.定义关键帧的语法
关键帧是 CSS3 动画的核心部分，它定义了动画的起始状态、结束状态以及中间的过渡状态。使用@keyframes规则来定义关键帧，语法如下：
@keyframes animation - name {
from {
/* 初始状态的样式 */
}
to {
/* 结束状态的样式 */
}
}
或者使用百分比的形式来定义多个关键帧：
@keyframes animation - name {
0% {
/* 初始状态的样式 */
}
50% {
/* 中间状态的样式 */
}
100% {
/* 结束状态的样式 */
}
}
其中animation - name是自定义的动画名称，用于在元素上应用这个动画。例如，定义一个名为my - animation的动画，让元素从透明变为不透明：
@keyframes my - animation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
关键帧的进阶使用
可以定义非常复杂的关键帧序列。比如，定义一个元素先旋转 360 度，再缩放为原来的一半，最后移动到新的位置的动画：
@keyframes complex - animation {
0% {
transform: rotate(0deg) scale(1) translate(0,0);
}
50% {
transform: rotate(360deg) scale(1) translate(0,0);
}
75% {
transform: rotate(360deg) scale(0.5) translate(0,0);
}
100% {
transform: rotate(360deg) scale(0.5) translate(50px,50px);
}
}
3.动画属性
animation - name
这个属性用于指定要应用的关键帧动画的名称。例如，要将前面定义的my - animation动画应用到一个div元素上，可以这样写：
div {
animation - name: my - animation;
}
animation - duration
它指定动画完成一个周期所需要的时间，单位是秒（s）或者毫秒（ms）。例如，设置my - animation动画持续时间为 3 秒：
div {
animation - name: my - animation;
animation - duration: 3s;
}
animation - timing - function
用于控制动画的速度曲线，也就是动画在每个周期中速度的变化方式。常见的值有：
ease：默认值，动画开始缓慢，中间加速，结束缓慢。
linear：动画以匀速进行。
ease - in：动画开始缓慢，然后加速。
ease - out：动画开始快速，然后减速。
cubic - bezier(n,n,n,n)：可以通过自定义贝塞尔曲线来更精确地控制动画速度，其中四个n是贝塞尔曲线的控制点坐标，取值范围是 0 - 1。例如，设置my - animation动画以匀速进行：
div {
animation - name: my - animation;
animation - duration: 3s;
animation - timing - function: linear;
}
animation - delay
用于设置动画开始前的延迟时间，单位是秒（s）或者毫秒（ms）。例如，设置my - animation动画延迟 1 秒开始：
animation - delay
用于设置动画开始前的延迟时间，单位是秒（s）或者毫秒（ms）。例如，设置my - animation动画延迟 1 秒开始：
animation - iteration - count
它指定动画循环的次数。可以是一个具体的数字，如2（表示动画循环 2 次），也可以是infinite（表示动画无限循环）。例如，设置my - animation动画无限循环：
div {
animation - name: my - animation;
animation - duration: 3s;
animation - timing - function: linear;
animation - iteration - count: infinite;
}
animation - direction
定义动画的播放方向。有以下几个值：
normal：动画按照正常方向播放，即从0%关键帧到100%关键帧。
reverse：动画反向播放，从100%关键帧到0%关键帧。
alternate：动画在奇数次数（1、3、5 等）正向播放，偶数次数（2、4、6 等）反向播放。
alternate - reverse：动画在奇数次数反向播放，偶数次数正向播放。例如，设置my - animation动画交替播放：
div {
animation - name: my - animation;
animation - duration: 3s;
animation - timing - function: linear;
animation - iteration - count: 1;
animation - direction: normal;
animation - fill - mode: forwards;
}
4.动画的应用场景和示例
简单的元素淡入淡出效果
利用opacity属性和动画属性可以轻松实现元素的淡入淡出。例如，让一个p元素在页面加载时淡入：
p {
animation - name: fade - in;
animation - duration: 2s;
animation - fill - mode: forwards;
}
@keyframes fade - in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
元素的旋转和缩放效果
使用transform属性来实现元素的旋转和缩放动画。例如，让一个img元素在鼠标悬停时旋转 360 度并放大 1.2 倍：
img {
transition: all 0.5s ease;
}
img:hover {
transform: rotate(360deg) scale(1.2);
}
复杂的路径动画（结合 SVG）
可以结合 SVG（可缩放矢量图形）来创建复杂的路径动画。例如，让一个元素沿着 SVG 定义的路径运动，这需要使用SVG的path元素和 CSS3 的transform - origin等属性来精确控制元素的运动路径。不过这种动画相对复杂，涉及到更深入的 SVG 和 CSS3 知识。
5.动画的兼容性和浏览器支持
CSS3 动画在现代浏览器中有较好的支持，但在一些旧版本浏览器中可能无法正常工作。例如，Internet Explorer 9 及以下版本对 CSS3 动画的支持有限。可以使用一些 CSS 前缀（如- webkit -、- moz -等）来提高兼容性，但这也增加了代码的复杂性。同时，也可以使用 JavaScript 库（如jQuery动画）作为 CSS3 动画的补充，在不支持 CSS3 动画的浏览器中提供类似的功能。
原文地址：https://blog.csdn.net/bdh123b/article/details/145212461
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！