动画css制作
基础动画实现
使用 @keyframes 定义动画关键帧，通过 animation 属性绑定到元素：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}过渡效果
通过 transition 实现属性变化的平滑过渡：
.button {
background: blue;
transition: background 0.3s ease;
}
.button:hover {
background: red;
}变形动画
结合 transform 实现旋转、缩放等效果：
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}多属性动画
同时控制多个属性的动画效果：
@keyframes slideAndFade {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.box {
animation: slideAndFade 1.5s forwards;
}性能优化
优先使用 transform 和 opacity 触发硬件加速：
.optimized {
will-change: transform, opacity;
transform: translateZ(0);
}响应式动画
通过媒体查询调整动画参数：
@media (max-width: 600px) {
.element {
animation-duration: 1s;
}
}
