css动画代码制作
CSS动画基础语法
CSS动画通过@keyframes规则定义动画序列，结合animation属性实现动态效果。以下是基础结构：
@keyframes 动画名称 {
0% { /* 起始状态 */ }
100% { /* 结束状态 */ }
}
.element {
animation: 动画名称 持续时间 速度曲线 延迟 播放次数 方向 填充模式;
}关键帧定义
关键帧百分比可自由设定，0%和100%可用from/to替代：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}动画属性详解
完整动画属性可拆分为独立属性：
.element {
animation-name: fadeIn;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}常用动画效果示例
淡入效果：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1.5s ease-out;
}弹跳效果：
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.bounce {
animation: bounce 2s infinite;
}性能优化建议
使用transform和opacity属性制作动画，避免触发重排：
/* 高性能动画 */
@keyframes slide {
from { transform: translateX(-100px); }
to { transform: translateX(0); }
}
/* 低性能动画（不推荐） */
@keyframes slide {
from { margin-left: -100px; }
to { margin-left: 0; }
}复合动画实现
通过逗号分隔实现多动画同步：
.element {
animation:
fadeIn 1s ease-out,
slide 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
