CSS 动画与过渡效果

1. CSS 过渡 (Transition)

CSS 过渡提供了一种在 CSS 属性值发生变化时控制动画速度的方法。它使属性变化成为一个持续一段时间的过程,而不是立即生效。例如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS 过渡后,该元素的颜色将按照一定的曲线速率从白色变化为黑色。

  • 特点:

    • 简单易用,适用于简单的状态切换。
    • 只能定义开始和结束状态,中间状态由浏览器自动补全,称为隐式过渡。
    • 需要事件触发,例如 :hover:focus、JavaScript 事件等。
  • 基本属性:

    • transition-property: 指定过渡效果应用于哪些 CSS 属性,例如 widthopacitybackground-color 等。如果设置为 all,则所有可过渡的属性都将应用过渡效果。
    • transition-duration: 指定过渡效果的持续时间,单位为秒 (s) 或毫秒 (ms)。
    • transition-timing-function: 指定过渡效果的速度曲线,例如 linear(匀速)、ease(默认值,先加速后减速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)等。也可以使用 cubic-bezier() 函数自定义速度曲线。
    • transition-delay: 指定过渡效果开始之前的延迟时间,单位为秒 (s) 或毫秒 (ms)。
  • 简写属性:

    • transition: property duration timing-function delay;
  • 示例: CSS

    css 复制代码
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 0.5s ease-in-out, background-color 1s linear; /* 同时过渡 width 和 background-color */
    }
    
    .box:hover {
      width: 200px;
      background-color: blue;
    }

    在这个例子中,当鼠标悬停在 .box 元素上时,其宽度会在 0.5 秒内平滑地过渡到 200px,背景颜色会在 1 秒内匀速过渡到蓝色。

2. CSS 动画 (Animation)

CSS 动画提供了更强大的动画控制能力,可以创建复杂的动画序列。它通过关键帧 (@keyframes) 来定义动画的各个阶段,并可以控制动画的循环、播放方向等。

  • 特点:

    • 可以创建复杂的动画序列,包括多个中间状态。
    • 无需事件触发,可以自动播放。
    • 可以控制动画的循环、播放方向、速度等。
  • 基本属性:

    • @keyframes: 用于定义动画的关键帧。每个关键帧使用百分比 (0% 到 100%) 或 from(相当于 0%)和 to(相当于 100%)来表示动画的不同阶段。
    • animation-name: 指定要应用的动画名称,与 @keyframes 中定义的名称对应。
    • animation-duration: 指定动画的持续时间。
    • animation-timing-function: 指定动画的速度曲线,与 transition-timing-function 类似。
    • animation-delay: 指定动画开始之前的延迟时间。
    • animation-iteration-count: 指定动画的循环次数,可以设置为无限循环 (infinite)。
    • animation-direction: 指定动画的播放方向,例如 normal(正常播放)、reverse(反向播放)、alternate(交替播放)、alternate-reverse(反向交替播放)。
    • animation-fill-mode: 指定动画在播放之前和之后如何应用样式,例如 none(不应用任何样式)、forwards(应用动画结束时的样式)、backwards(应用动画开始时的样式)、both(同时应用开始和结束时的样式)。
    • animation-play-state: 指定动画的播放状态,例如 running(播放)或 paused(暂停)。
  • 简写属性:

    • animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • 示例: CSS

    css 复制代码
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: move 2s linear infinite alternate;
    }
    
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(100px);
      }
      100% {
        transform: translateX(0);
      }
    }

    在这个例子中,.box 元素会以 2 秒的周期,匀速地在水平方向上来回移动 100px,并无限循环播放。

3. 适用场景

  • Transition (过渡): 适用于简单的状态切换动画,例如鼠标悬停效果、表单元素获得焦点效果等。代码简洁,易于使用。
  • Animation (动画): 适用于复杂的动画序列,例如页面加载动画、元素入场动画、循环动画等。控制能力更强,可以实现更丰富的动画效果。
相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法