管窥CSS3动画的实现原理
本帖最后由 马黑黑 于 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:26 编辑 <br /><br /><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="我变我变我变变变" /> 效果楼的核心代码：
<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="我变我变我变变变" />
效果楼的全部代码（兼顾了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="我变我变我变变变" />
@东篱闲人 二楼征用你的茶几 在本页用 img 发图，无需 CSS 代码，仅需要：
<img alt="说明" class="s2b" src="图片地址" />
离开了本页，就需要加 CSS 代码 这个好玩。只能是大小变化么，能不能从一个地方变到另一个地方？{:4_173:} 马黑黑 发表于 2021-12-25 11:41
在本页用 img 发图，无需 CSS 代码，仅需要：
在本页中，如果我重新设定s2b，是自动执行前面一还是后面一个？{:4_173:} 黑黑太棒了，又有好玩的了{:4_173:} 还可以这样玩啊 {:5_106:}猫也学习下，谢谢老黑{:4_190:} 还能这么玩太好了
<img alt="说明" class="s2b" src="https://s4.ax1x.com/2021/12/19/Teg2t0.jpg" /> 啊~~~真的出来了，没有用css的{:4_178:} 有弹性的，看见上面加分的会有弹性{:4_173:} 马黑黑 发表于 2021-12-25 11:17
本帖最后由 马黑黑 于 2021-12-25 11:26 编辑
@keyframes iChange {
奇怪，这个楼层小辣椒的评分也跟着一起变化了？ 大猫咪 发表于 2021-12-25 12:48
还可以这样玩啊 猫也学习下，谢谢老黑
可以，从50层到1层 红影 发表于 2021-12-25 15:04
奇怪，这个楼层小辣椒的评分也跟着一起变化了？
没看明白 马黑黑 发表于 2021-12-25 15:13
可以，从50层到1层
{:4_179:}老黑来了 {:4_190:} 周末快乐 红影 发表于 2021-12-25 12:24
这个好玩。只能是大小变化么，能不能从一个地方变到另一个地方？
一楼里说道，只要是CSS支持的，都可以。我的例子的大小变化，所以变大小；可以尝试改变 position 的left、top位置让其运动，只要你能想到的CSS又支持的 大猫咪 发表于 2021-12-25 15:19
老黑来了周末快乐
周末好{:5_108:}