动画制作css效果
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现，可以创建平滑的过渡和动态效果。以下是一个简单的旋转动画示例：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.element {
animation: spin 2s linear infinite;
}关键帧动画
关键帧动画允许定义多个中间状态，实现复杂动画效果：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}
.box {
animation: bounce 1s ease-in-out infinite;
}过渡效果
使用 transition 属性可以在状态变化时添加平滑过渡：
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}3D 变换
CSS 支持 3D 变换效果，增强视觉层次：
.card {
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}动画性能优化
为确保动画流畅，建议使用 transform 和 opacity 属性，避免触发重排：
.optimized {
will-change: transform;
transform: translateZ(0);
}响应式动画
结合媒体查询实现不同屏幕尺寸下的动画效果：
@media (max-width: 600px) {
.responsive {
animation: fade 2s;
}
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}动画事件监听
通过 JavaScript 监听动画事件，实现交互控制：
const element = document.querySelector('.animated');
element.addEventListener('animationend', () => {
console.log('Animation finished');
});
