logo

第九章:过渡与动画

作者
Modified on
Reading time
2 分钟阅读:..评论:..

1. CSS 过渡

1.1 过渡的基本概念

CSS 过渡(Transitions)是一种可以让属性值在一定时间内平滑过渡的技术。它能增强用户体验,增加页面的动态效果。

1.2 过渡属性与过渡效果

CSS 提供了几个专用属性来定义过渡效果:

  • **transition-property**:指定要添加过渡效果的 CSS 属性。
  • **transition-duration**:指定过渡效果的时间。
  • **transition-timing-function**:定义过渡效果的速度曲线。
  • **transition-delay**:指定过渡效果的延迟时间。

示例代码

/* 默认状态 */ .button { background-color: blue; color: white; padding: 10px; border: none; transition-property: background-color, transform; transition-duration: 0.5s; transition-timing-function: ease-in-out; transition-delay: 0s; } /* 当鼠标悬停时 */ .button:hover { background-color: green; transform: scale(1.1); }

解释

  • .button 类定义了一个按钮,默认背景色为蓝色。
  • 使用 transition 属性,让背景色和缩放效果在 0.5 秒内平滑过渡,过渡效果为 ease-in-out

2. CSS 动画

2.1 动画的基本概念

CSS 动画(Animations)是通过定义关键帧来创建复杂的动画效果。与过渡不同,动画可以独立运行,不需要用户交互。

2.2 关键帧动画(@keyframes

关键帧动画通过 @keyframes 规则定义,在动画的不同时间点指定样式。

示例代码

/* 定义关键帧动画 */ @keyframes example { 0% { background-color: red; left: 0; } 50% { background-color: yellow; left: 50px; } 100% { background-color: green; left: 100px; } } /* 应用动画 */ .box { width: 100px; height: 100px; position: relative; animation-name: example; animation-duration: 4s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; }

解释

  • @keyframes example 定义了一段名为 example 的动画。
  • .box 类将这段动画应用到一个盒子元素上,持续时间为 4 秒,延迟 1 秒,动画无限循环,且方向交替。

2.3 动画属性与动画效果

动画属性

  • **animation-name**:指定动画名称。
  • **animation-duration**:指定动画持续时间。
  • **animation-timing-function**:定义动画的速度曲线。
  • **animation-delay**:指定动画开始前的延迟时间。
  • **animation-iteration-count**:定义动画的播放次数。
  • **animation-direction**:定义动画是否交替反转。

动画效果

通过组合使用上述属性,可以实现丰富的动画效果。以下是几个常见的动画效果示例:

示例代码

/* 旋转动画 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate-box { width: 100px; height: 100px; background-color: purple; animation: rotate 2s infinite linear; } /* 渐变动画 */ @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .fade-box { width: 100px; height: 100px; background-color: pink; animation: fade 3s forwards; }

解释

  • rotate 动画让元素在 2 秒内无限次旋转。
  • fade 动画让元素在 3 秒内从透明度 0 渐变到 1,并在动画结束后保持最终状态。

通过过渡和动画,开发者可以为网页添加丰富的动态效果,从而提升用户体验。理解这些技术并灵活运用,将为你的前端开发技能增色不少。