← 返回笔记列表

CSS 动画效果

学习要点：Transform变换、Transition过渡、Animation动画以及Animate.css动画库的使用。（animation-demo）

一、Transform 变换

Transform 属性允许你对元素进行旋转、缩放、移动或倾斜。

悬停查看变换效果
(旋转45度+放大1.2倍)

常用 transform 函数：

.box {
  transform: rotateY(50deg) translateZ(0px);
  transition: transform 0.5s ease-out;
}

3D变换示例：

.card {
  transform: rotateY(50deg) translateZ(100px);
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

二、Transition 过渡

Transition 提供元素从一种样式逐渐变为另一种样式的效果。

.transition-demo {
  width: 180px;
  transition: width 1.5s ease-in-out,
              background-color 1s ease-in-out;
}
.transition-demo:hover {
  width: 350px;
  background-color: #d9534f;
}
悬停查看过渡效果
(宽度变化+颜色变化)

主要属性：

速度曲线类型：

linear
(匀速)
ease
(缓入缓出)
ease-in
(缓入)
ease-out
(缓出)

复合写法：

transition: width 2s ease-in-out 0.5s,
            height 3s linear 0.2s,
            opacity 1s ease-out;

三、Animation 动画

使用 @keyframes 规则创建动画。

自动播放动画
(颜色变化+缩放)

关键属性：

@keyframes 定义方式：

1. 从...到...：

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

2. 百分比关键帧：

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}

四、Animate.css 动画库

Animate.css 是一个现成的CSS动画库，提供多种预设动画效果。

弹跳动画效果
(Bounce)

使用方法：

  1. 引入CSS文件
  2. 添加基本类 animate__animated
  3. 添加具体动画类如 animate__bounce
  4. 可选：添加 animate__infinite 实现无限循环
<!-- 引入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 animate__infinite">
  弹跳效果
</div>

特点：

常用动画效果：

animate__bounce       // 弹跳
animate__fadeIn      // 淡入
animate__fadeOut     // 淡出
animate__flip        // 翻转
animate__pulse       // 脉冲
animate__rotateIn    // 旋转进入
animate__shakeX      // 水平摇晃
animate__zoomIn      // 缩放进入
动画性能优化：