当前位置：首页 > CSS

css动画制作效果

2026-04-01 17:55:59CSS

CSS动画基础语法

CSS动画通过@keyframes规则定义动画序列，结合animation属性实现效果。基本结构如下：

@keyframes 动画名称 {
  0% { /* 初始状态 */ }
  100% { /* 结束状态 */ }
}

.element {
  animation: 动画名称 持续时间 速度曲线 延迟 播放次数 方向 填充模式;
}

常用动画属性

animation-name: 指定@keyframes名称
animation-duration: 动画持续时间（如2s）
animation-timing-function: 速度曲线（ease/linear/cubic-bezier()）
animation-delay: 延迟开始时间
animation-iteration-count: 播放次数（infinite表示无限循环）
animation-direction: 播放方向（normal/reverse/alternate）
animation-fill-mode: 动画前后如何应用样式（forwards保留结束状态）

基础动画示例

淡入效果：

css动画制作效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1.5s ease-out;
}

旋转效果：

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 2s linear infinite;
}

复合动画制作

同时实现移动和颜色变化：

css动画制作效果

@keyframes slideAndColor {
  0% {
    transform: translateX(0);
    background: blue;
  }
  50% {
    transform: translateX(200px);
    background: purple;
  }
  100% {
    transform: translateX(0);
    background: red;
  }
}

.box {
  animation: slideAndColor 3s ease-in-out infinite alternate;
}

响应式动画技巧

使用CSS变量动态控制动画：

:root {
  --anim-duration: 1s;
}

.element {
  animation: bounce var(--anim-duration);
}

@media (max-width: 768px) {
  :root {
    --anim-duration: 0.5s;
  }
}

性能优化建议

优先使用transform和opacity属性，这些属性不会触发重排
避免动画影响width/height/margin等会触发布局变化的属性
对动画元素使用will-change: transform;提示浏览器优化
硬件加速：添加transform: translateZ(0)

高级动画案例

3D翻转卡片效果：

.card {
  perspective: 1000px;
}

.card-inner {
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}