css 动画制作
CSS 动画制作方法
CSS 动画可以通过 @keyframes 和 animation 属性实现，以下是具体实现方式。
使用 @keyframes 定义动画
通过 @keyframes 规则定义动画的关键帧，指定动画从开始到结束的变化过程。
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}应用动画到元素
使用 animation 属性将动画绑定到元素，并设置动画的持续时间、速度曲线等参数。
.element {
animation: slideIn 1s ease-in-out;
}控制动画播放次数
通过 animation-iteration-count 设置动画的播放次数，infinite 表示无限循环。
.element {
animation: slideIn 1s ease-in-out infinite;
}延迟动画开始时间
使用 animation-delay 设置动画的延迟启动时间。
.element {
animation: slideIn 1s ease-in-out 0.5s;
}动画方向控制
animation-direction 可以控制动画的播放方向，如 reverse（反向播放）或 alternate（交替播放）。
.element {
animation: slideIn 1s ease-in-out alternate;
}动画填充模式
animation-fill-mode 定义动画执行前后如何应用样式，forwards 表示保留最后一帧的样式。
.element {
animation: slideIn 1s ease-in-out forwards;
}结合 transform 实现复杂动画
transform 属性可以结合动画实现旋转、缩放、移动等效果。
@keyframes rotateAndScale {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.5);
}
100% {
transform: rotate(360deg) scale(1);
}
}
.element {
animation: rotateAndScale 2s linear infinite;
}使用 transition 实现简单动画
对于简单的状态变化，可以使用 transition 属性。
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}性能优化建议
- 优先使用
transform和opacity实现动画，这些属性不会触发重排（reflow）。 - 避免在高频动画中使用
box-shadow或filter，可能导致性能问题。 - 使用
will-change提示浏览器元素将发生动画变化。
.element {
will-change: transform;
}通过以上方法，可以灵活实现各种 CSS 动画效果，从简单的过渡到复杂的多关键帧动画。
