当前位置：首页 > CSS

css动画快速制作

2026-04-02 16:56:03CSS

使用CSS关键帧（@keyframes）创建基础动画

通过@keyframes定义动画序列，结合animation属性应用到元素。示例实现元素淡入效果：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 2s ease-in-out;
}

利用transition实现简单交互动画

通过transition属性平滑过渡CSS状态变化，适合悬停或点击效果：

css动画快速制作

.button {
  background: blue;
  transition: background 0.3s, transform 0.2s;
}
.button:hover {
  background: red;
  transform: scale(1.05);
}

结合transform实现复杂动画

使用rotate、translate等变换函数创建位移或旋转动画：

@keyframes slideAndSpin {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(100px) rotate(180deg); }
  100% { transform: translateX(0) rotate(360deg); }
}
.box {
  animation: slideAndSpin 3s infinite;
}

使用animation-delay控制时序

为多个元素设置延迟启动时间，形成连贯动画序列：

css动画快速制作

.item {
  animation: fadeIn 1s forwards;
}
.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.4s; }

借助CSS变量动态调整动画

通过变量实现灵活的参数控制，便于复用：

:root {
  --anim-duration: 0.5s;
}
.card {
  animation: bounce var(--anim-duration) infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

预定义动画库加速开发

直接引用Animate.css等现成库快速实现效果：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<div class="animate__animated animate__bounce">弹跳效果</div>