过渡与动画

字数: 0 字时长: 0 分钟

简介

css3 新增了过渡（transition）和动画（animation）两个新特性，使得网页的样式更加丰富和动态。本章将介绍 CSS3 的过渡和动画，包括如何定义过渡和动画，以及如何使用这些特性来创建更复杂的动画效果。

过渡

过渡的基本概念

过渡（transition）是元素从一种样式逐渐改变为另外一种样式的效果，可以实现元素不同状态间的平滑过渡。这通常发生在用户与页面进行交互时，例如鼠标悬停、点击、元素平移等。

过渡的语法

要应用过渡效果，需要在 CSS 中使用transition属性。该属性包含以下子属性：

transition-property：规定应用过渡的 CSS 属性的名称，如width、height、background-color等。如果要为所有可过渡属性应用过渡效果，可以使用all。
transition-duration：定义过渡效果花费的时间，单位是秒（s）或毫秒（ms）。
transition-timing-function：规定过渡效果的时间曲线，即过渡的速度如何随时间变化。常见的值有ease（慢-快-慢）、linear（匀速）、ease-in（慢开始）、ease-out（慢结束）和ease-in-out（慢开始和结束）。
transition-delay：规定过渡效果的延迟时间，即过渡效果在何时开始，单位是秒（s）或毫秒（ms）。
transition：当然，一般来说都是直接使用简写属性，可以同时设置以上所有子属性。

过渡示例

htmlcss

html

将鼠标移上去的元素会从红色变为蓝色，并改变大小，并带有淡入淡出的效果。
<div class="transition-box"></div>

css

.transition-box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 全部属性，贝塞尔曲线 */
  transition: all 1s ease;
  margin: 0 auto;
}
.transition-box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

动画

动画的基本概念

动画（animation）是一组 CSS 样式规则，允许你通过关键帧（keyframes）来控制动画序列中的中间步骤。与过渡不同，动画可以在多个状态之间创建更复杂的变换效果，并且可以控制动画的循环次数、方向等。

动画的语法

要应用动画效果，需要在 CSS 中使用@keyframes 规则来定义动画的关键帧，并使用 animation 属性来应用动画。animation属性可以包含以下子属性：

animation-name：指定要应用的动画名称，该名称是在@keyframes 规则中定义的。
animation-duration：定义动画的持续时间，单位是秒（s）或毫秒（ms）。
animation-timing-function：规定动画的时间曲线，与过渡中的 transition-timing-function类似。
animation-delay：规定动画的延迟时间，即动画在何时开始，单位是秒（s）或毫秒（ms）。
animation-iteration-count：定义动画的播放次数，可以是具体的数字或 infinite（无限次）。
animation-direction：规定动画的播放方向，如 normal（正向播放）、reverse（反向播放）、alternate（交替播放）等。

动画示例

htmlcss

html

<div style="padding-bottom:180px;">
  <div class="animation-box"></div>
</div>

css

/* 定义动画关键帧 */
@keyframes example {
  0% {
    transform: translateX(0);
    background-color: pink;
  }
  25% {
    transform: translateX(200px);
    background-color: blue;
  }
  50% {
    transform: translate(200px, 200px);
    background-color: yellow;
  }
  75% {
    transform: translateY(200px);
    background-color: green;
  }
  100% {
    transform: translateX(0);
    background-color: pink;
  }
}

.animation-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: pink;
  animation: example 6s infinite;
}

最后更新于: 2024/11/7 22:14:32

过渡与动画 ​

过渡 ​

过渡的基本概念 ​

过渡的语法 ​

过渡示例 ​

动画 ​

动画的基本概念 ​

动画的语法 ​

动画示例 ​