css动画制作教学
CSS动画基础概念
CSS动画通过@keyframes规则定义动画序列，结合animation属性控制动画的播放方式。动画由关键帧组成，指定元素在不同时间点的样式状态。
定义关键帧动画
使用@keyframes规则创建动画序列，语法如下：
@keyframes 动画名称 {
0% { 样式属性: 值; } /* 起始状态 */
50% { 样式属性: 值; } /* 中间状态 */
100% { 样式属性: 值; } /* 结束状态 */
}示例：实现元素从左向右移动的动画
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}应用动画到元素
通过animation属性将动画绑定到元素，常用子属性包括：
animation-name: 指定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease-in-out）。animation-delay: 延迟时间（如1s）。animation-iteration-count: 播放次数（infinite表示无限循环）。
示例：
.box {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}复合动画效果
通过组合多个关键帧和属性实现复杂动画。例如旋转并改变颜色：
@keyframes rotateAndColor {
0% {
transform: rotate(0deg);
background-color: red;
}
100% {
transform: rotate(360deg);
background-color: blue;
}
}控制动画播放状态
使用animation-play-state暂停或继续动画：
.box:hover {
animation-play-state: paused; /* 悬停时暂停 */
}响应式动画
结合媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
.box {
animation-duration: 1s; /* 小屏幕缩短动画时间 */
}
}性能优化建议
- 优先使用
transform和opacity属性，避免触发重绘。 - 减少复杂动画的迭代次数，避免页面卡顿。
通过以上方法，可以高效实现平滑、高性能的CSS动画效果。
