css如何制作成
制作CSS动画的方法
使用@keyframes规则定义动画的关键帧，通过animation属性将动画应用到元素上。关键帧可以指定动画在不同时间点的样式变化。
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: green;}
}
div {
animation-name: example;
animation-duration: 4s;
}动画属性详解
animation是一个简写属性，包含以下子属性：name、duration、timing-function、delay、iteration-count、direction、fill-mode和play-state。每个子属性都可以单独设置。
div {
animation: example 3s ease-in 1s infinite alternate;
}使用transform制作动画
结合transform属性可以实现更复杂的动画效果，如旋转、缩放、平移等。这些变换可以平滑过渡，创建流畅的动画。
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
animation: rotate 2s linear infinite;
}过渡效果transition
对于简单的状态变化，可以使用transition属性。它指定了属性变化的持续时间、延迟时间和速度曲线。
div {
transition: width 2s, height 2s;
}
div:hover {
width: 300px;
height: 300px;
}性能优化建议
使用will-change属性预先告知浏览器哪些属性会变化，优化渲染性能。避免过多使用耗性能的属性如box-shadow和filter。
div {
will-change: transform;
}浏览器兼容性处理
为确保动画在所有浏览器中正常工作，需要添加厂商前缀。现代构建工具如Autoprefixer可以自动处理这个问题。
@-webkit-keyframes example {
0% {background-color: red;}
100% {background-color: yellow;}
}动画事件监听
JavaScript可以监听动画事件，如animationstart、animationend和animationiteration，实现更复杂的交互逻辑。
document.getElementById("myDiv").addEventListener("animationend", myFunction);
