在 transform 和 animation 出现之前，前端开发者通常需要编写大量的 JavaScript 代码来实现动态效果。然而，这两个 CSS 属性的引入极大地简化了丰富动效和过渡效果的实现，从而让用户界面更加引人入胜，交互体验更为流畅。本文将深入探讨 transform 和 animation 这两个属性，并分析它们在创造动态视觉效果中的应用。
下面我们通过Demo示例的方式，来见证下。
Transform：改变世界的力量
transform属性允许我们对元素进行旋转、缩放、倾斜或平移，而不影响其在页面中的布局。这为CSS带来了革命性的变化，使得之前需要复杂JavaScript代码才能实现的动效，现在可以仅用几行CSS代码就能达成。
<div class="box"></div>
.box {width: 100px;height: 80px;background-color: red;margin-bottom: 130px;
}
2D Transform
在2D空间中，我们可以使用translate()、scale()、rotate()和skew()等函数来对元素进行操作。
<div class="box transform-box"></div>
.transform-box {transform: translate(50px, 100px) rotate(30deg) scale(1.5);
}
translate(x, y)：沿着X轴和Y轴移动元素。scale(x, y)：缩放元素的宽度和高度。rotate(angle)：旋转元素。skew(x-angle, y-angle)：倾斜元素。
3D Transform
CSS的3D变换则进一步扩展了我们的创作空间，允许我们在三维空间中操作元素。
<div class="box transform-box-3D"></div>
.transform-box-3D {transform: translate3d(50px, 100px, 150px) rotate3d(1, 1, 1, 45deg);
}
translate3d(x, y, z)：沿着X轴、Y轴和Z轴移动元素。scale3d(x, y, z)：缩放元素的宽度和高度。rotate3d(x, y, z, angle)：围绕一个向量旋转元素。perspective()：定义3D元素的视距，创建透视效果。
Animation：让世界动起来
如果说transform是静态的魔术，那么animation就是让这些魔术动起来的关键。通过animation，我们可以创建平滑的动画效果，使得元素的变换不再是瞬间完成，而是随着时间的推移逐渐发生。
关键帧动画
使用@keyframes规则，我们可以定义动画的关键帧，指定动画在不同阶段的样式。
<div class="box rotate-box"></div>
@keyframes rotate-box {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
.rotate-box {animation: rotate-box 2s infinite linear;
}
动画属性
animation属性是动画效果的集合，包括动画名称、持续时间、速度曲线、延迟、播放次数和方向等。
.animation-box {animation: move-box 2s ease-in-out 1s 3 alternate;
}
animation: name duration timing-function delay iteration-count direction;
animation-name：指定由@keyframes定义的动画名称。animation-duration：动画完成一个周期的时间。animation-timing-function：动画的速度曲线。animation-delay：动画延迟开始的时间。animation-iteration-count：动画播放次数。animation-direction：动画是否应该轮流反向播放。
结合使用：创造奇迹
将transform和animation结合起来，我们可以创造出令人印象深刻的视觉效果。
@keyframes fly-box {0% {transform: translateX(0) rotate(0deg);}50% {transform: translateX(100px) rotate(180deg);}100% {transform: translateX(0) rotate(360deg);}
}
.fly-box {animation: fly-box 4s infinite;
}
结论
transform属性允许我们对元素进行旋转、缩放、倾斜或平移，而不影响其在页面中的布局。这为CSS带来了革命性的变化，使得之前需要复杂JavaScript代码才能实现的动效，现在可以仅用几行CSS代码就能达成。而通过animation，我们可以创建平滑的动画效果，使得元素的变换不再是瞬间完成，而是随着时间的推移逐渐发生。
transform和animation虽然存在着区别，但两者的结合能更好的展示视觉效果。
