css动画效果制作
CSS动画效果制作方法
CSS动画可以通过@keyframes规则和animation属性实现，以下是具体实现方式：
定义关键帧动画
使用@keyframes定义动画序列，从0%到100%描述动画的各个阶段：
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}应用动画到元素
通过animation属性将定义好的动画应用到元素上：
.element {
animation: slideIn 1s ease-in-out forwards;
}常用动画属性详解
animation-name
指定要使用的@keyframes动画名称。
animation-duration 设置动画完成一个周期所需时间，单位秒(s)或毫秒(ms)。
animation-timing-function 定义动画速度曲线：
ease：默认值，慢速开始然后变快最后慢速结束linear：匀速ease-in：慢速开始ease-out：慢速结束cubic-bezier(n,n,n,n)：自定义速度曲线
animation-delay 设置动画开始前的延迟时间。
animation-iteration-count 定义动画播放次数：
infinite：无限循环- 数字：具体循环次数
animation-direction 控制动画播放方向：
normal：正向播放reverse：反向播放alternate：先正向再反向交替alternate-reverse：先反向再正向交替
animation-fill-mode 规定动画执行前后如何应用样式：
forwards：保持最后一个关键帧样式backwards：应用第一个关键帧样式both：同时应用前后样式
实用动画示例
淡入淡出效果
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fade 2s ease-in;
}弹跳效果
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 0.5s infinite;
}旋转加载动画
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
animation: spin 1s linear infinite;
}性能优化建议
使用transform和opacity属性制作动画，这些属性不会触发重排和重绘，性能最佳。
避免在动画中使用box-shadow和border-radius等昂贵属性。
使用will-change属性预先告知浏览器元素将要变化：
.animated-element {
will-change: transform, opacity;
}浏览器兼容性处理
为不同浏览器添加前缀：
@-webkit-keyframes example {
/* ... */
}
@keyframes example {
/* ... */
}
.element {
-webkit-animation: example 1s;
animation: example 1s;
}
