管窥CSS3动画的实现原理

马黑黑 · 发表于 2021-12-25 11:17

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2021-12-25 11:37 编辑

以前，HTML有marquee标签，可以令文字、图画乃至其他可视网页对象朝四个方向移动，老一代坛友玩的不亦乐乎，满坛子的走马灯令人眼花缭乱。W3C组织却在HTML5推出时冷落了marquee标签，时下使用marquee标签的人少而又少，虽然浏览器对之仍完美支持（保留对以往的兼容性）。

动画的实现，即使抛弃marquee，还可以使用JavaScript甚至Java来实现，只是门槛偏高，论坛也未必开放相应权限。那我们还有什么选择？

CSS3动画！

作为网页样式的幕后操纵者，CSS发展到3.0之后，功能越发强大，引入了动画样式。实际上，“动画样式”的表述并不准确，应该这么说，CSS3可以将设定的样式A按既定的时间轴和变化时速演变到样式B，而且可以循环演变、反向演变（即又从B变到A）。例如，让一幅图从 15×15 慢慢变大，一直变到 150×150，然后又慢慢变小，从 150×150 慢慢变回 15×15，循环不断（也可以有停止机制）。这一类动态效果，只要是CSS支持的样式，都可以实现。

要实现CSS动画，我们需要一个指令：@keyframes ——

@keyframes iChange {

from { width: 15px; height:15px; } to { width:150px; height:150px; }
}

这里，@keyframes 是实现动画的属性命令，iChange 是我们自己命名的动画名称。名称是必须的，它是捆绑到实现动画对象的依据。from ... to ... 是变化指令，从……到……演变的意思。

除了使用 from … to … 指令语句，我们也可以用百分比来发出指令：

@keyframes iChange {

0% { width:15px;height:15px; }
20% { width:45px;height:45px; }
40% { width:75px;height:75px; }
60% { width:105px;height:105px; }
80% { width:135px;height:135px; }
100% { width:150px;height:150px; }
}

不论用 from … to … 还是百分比，都是预设了一个演变流程，这个流程我们将其命名为 iChange 以便在实现动画的网页对象代码中进行绑定。绑定方法如下：

.s2b {
animation: iChange 5s infinite alternate;
width:15px;
height:15px;
}

这里，我们创建了一个由点开头的CSS命令 .s2b ，这样的东东引用时需要 class="s2b" 语句即可，且可反复使用。.s2g 最关键的部分是第一行：

animation 是动画属性，其后的值中，iChange 是我们之前定义的动画样式名称，5s 表示一个单向变化时长为5秒钟，infinite 表示循环变化，alternate 表示反向变化（亦即从15×15到150×150后又从150×150到15×15）。后面两句设定长宽初始值，与动画无关。

至此，CSS动画设定完毕，我们只需用 HTML 语法来发图，加入 class="s2b" 语句，图片“小-大-小”的演变效果就出来了：

<img class="s2b" alt="我变我变我变变变" src="图片url地址" />

一些必要的说明：

① IE及IE内核的浏览器必须更新至IE10或以上才支持上述CSS3动画；
② 一些旧版本的Chrome、Safri、Firefox、Opera等浏览器不能识别 @keyframes 和 animation ，需要额外声明方可，这里暂不讨论。

马黑黑 · 发表于 2021-12-25 11:17

本帖最后由马黑黑于 2021-12-25 11:26 编辑

我变我变我变变变

马黑黑 · 发表于 2021-12-25 11:28

效果楼的核心代码：

<style type="text/css">
@keyframes iChange {
from { width: 23px; height:24px; } to { width:230px; height:249px; }
}
.s2b {
animation: iChange 5s infinite alternate;
width:23px;
height:24px;
}
</style>
<img class="s2b" src="https://s4.ax1x.com/2021/12/19/Teg2t0.jpg" alt="我变我变我变变变" />

复制代码

马黑黑 · 发表于 2021-12-25 11:30

效果楼的全部代码（兼顾了Firefox等浏览器）：

<style type="text/css">
@keyframes iChange {
from { width: 23px; height:24px; } to { width:230px; height:249px; }
}
@-moz-keyframes iChange {
from { width: 23px; height:24px; } to { width:230px; height:249px; }
}
@-webkit-keyframes iChange {
from { width: 23px; height:24px; } to { width:230px; height:249px; }
}
@-o-keyframes iChange {
from { width: 23px; height:24px; } to { width:230px; height:249px; }
}
.s2b {
animation: iChange 5s infinite alternate;
-moz-animation: iChange 5s infinite alternate; /* Firefox */
-webkit-animation: iChange 5s infinite alternate; /* Safari 和 Chrome */
-o-animation: iChange 5s infinite alternate; /* Opera */
width:23px;
height:24px;
}
</style>
<img class="s2b" src="https://s4.ax1x.com/2021/12/19/Teg2t0.jpg" alt="我变我变我变变变" />