动画制作css
CSS 动画制作方法
CSS 动画主要通过 @keyframes 规则和 animation 属性实现。以下是几种常见的 CSS 动画制作方法：
关键帧动画（@keyframes） 定义动画的关键帧，指定动画在不同时间点的样式变化。例如：
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}应用动画（animation 属性） 将定义好的关键帧动画应用到元素上：
.element {
animation: slideIn 1s ease-in-out;
}过渡动画（transition）
通过 transition 属性实现简单的状态变化动画：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}变形动画（transform）
结合 transform 属性实现旋转、缩放等效果：
.box {
transform: rotate(0deg);
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}多动画组合 可以同时应用多个动画效果：
.element {
animation:
fadeIn 1s ease-in,
bounce 2s infinite;
}动画性能优化
使用 will-change 属性预先告知浏览器可能的变化：
.animated-element {
will-change: transform, opacity;
}响应式动画 通过媒体查询调整动画表现：
@media (max-width: 768px) {
.element {
animation: mobileSlide 1s;
}
}实用动画示例
无限旋转动画
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}弹跳效果
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bouncer {
animation: bounce 1s infinite;
}渐显效果
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s forwards;
}高级技巧
使用 CSS 变量控制动画
:root {
--anim-duration: 1s;
}
.element {
animation: slideIn var(--anim-duration);
}步进动画（steps） 创建帧动画效果：
@keyframes tick {
to { background-position: -480px 0; }
}
.sprite {
animation: tick 1s steps(12) infinite;
}3D 变换动画
@keyframes flip {
0% { transform: perspective(400px) rotateY(0); }
100% { transform: perspective(400px) rotateY(180deg); }
}
.card {
animation: flip 1s ease-in-out;
}浏览器兼容性
确保动画在主流浏览器中正常工作，必要时添加前缀：
@-webkit-keyframes example {
/* WebKit 前缀 */
}性能考虑
优先使用 transform 和 opacity 属性制作动画，这些属性不会触发重排，性能更优。避免在动画中频繁修改 width、height、margin 等可能引发布局变化的属性。
