码农教程 - 一技在手,衣食无忧! tools

目录

CSS 动画

❮ 上一节 下一节 ❯

CSS 动画

CSS 允许在不使用 JavaScript 的情况下对 HTML 元素进行动画处理！

CSS

在本章中，您将了解以下属性：

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

浏览器对动画的支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

什么是 CSS 动画？

动画让元素逐渐从一种样式变为另一种样式。

您可以根据需要多次更改 CSS 属性。

要使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧保存元素在特定时间将具有的样式。

@keyframes 规则

当您在内部指定 CSS 样式时@keyframes规则，动画会在某些时间逐渐从当前样式变为新样式。

要使动画正常工作，您必须将动画绑定到元素。

以下示例将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒，并逐渐将 <div> 元素的背景颜色从 "red" 更改为 "yellow"：

示例

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
亲自试一试 »

笔记：这个animation-duration属性定义动画需要多长时间才能完成。如果animation-duration未指定属性，则不会发生动画，因为默认值为 0s（0 秒）。

在上面的示例中，我们使用关键字 "from" 和 "to"（代表 0%（开始）和 100%（完成））指定样式何时更改。

也可以使用百分比。通过使用百分比，您可以添加任意数量的样式更改。

以下示例将在动画完成 25%、50% 以及动画完成 100% 时更改 <div> 元素的背景颜色：

示例

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
亲自试一试 »

以下示例将在动画完成 25%、50% 以及动画完成 100% 时更改 <div> 元素的背景颜色和位置：

示例

/* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
亲自试一试 »

延迟动画

这个animation-delay属性指定动画开始的延迟。

以下示例在开始动画之前有 2 秒的延迟：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}
亲自试一试 »

负值也是允许的。如果使用负值，动画将开始播放，就好像它已经播放了一样氮秒。

在以下示例中，动画将开始播放，就像已经播放了 2 秒一样：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}
亲自试一试 »

设置动画应运行多少次

这个animation-iteration-count属性指定动画应运行的次数。

以下示例将在停止之前运行动画 3 次：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}
亲自试一试 »

以下示例使用值 "infinite" 使动画永远持续：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
亲自试一试 »

以反向或交替循环运行动画

这个animation-direction属性指定动画是否应向前、向后或交替循环播放。

动画方向属性可以具有以下值：

  • normal- 动画正常播放（向前）。这是默认的
  • reverse- 动画以相反方向（向后）播放
  • alternate - 动画先向前播放，然后向后播放
  • alternate-reverse- 动画先向后播放，然后向前播放

以下示例将以相反方向（向后）运行动画：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}
亲自试一试 »

以下示例使用值 "alternate" 使动画先向前运行，然后向后运行：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
亲自试一试 »

以下示例使用值 "alternate-reverse" 使动画先向后运行，然后再向前运行：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}
亲自试一试 »

指定动画的速度曲线

这个animation-timing-function属性指定动画的速度曲线。

Animation-timing-function 属性可以具有以下值：

  • ease- 指定一个慢速开始，然后快速，然后缓慢结束的动画（这是默认值）
  • linear- 指定从开始到结束速度相同的动画
  • ease-in- 指定缓慢启动的动画
  • ease-out- 指定慢速结束的动画
  • ease-in-out- 指定缓慢开始和结束的动画
  • cubic-bezier(n,n,n,n)- 允许您在三次贝塞尔函数中定义自己的值

以下示例显示了一些可以使用的不同速度曲线：

示例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
亲自试一试 »

指定动画的填充模式

CSS 动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响元素。 Animation-fill-mode 属性可以覆盖此行为。

这个animation-fill-mode属性指定动画未播放时（开始前、结束后或两者）时目标元素的样式。

Animation-fill-mode 属性可以具有以下值：

  • none- 默认值。动画在执行之前或之后不会将任何样式应用于元素
  • forwards- 元素将保留最后一个关键帧设置的样式值（取决于动画方向和动画迭代计数）
  • backwards- 元素将获取由第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留该值
  • both- 动画将遵循向前和向后的规则，在两个方向上扩展动画属性

以下示例让 <div> 元素在动画结束时保留最后一个关键帧的样式值：

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
亲自试一试 »

以下示例让 <div> 元素在动画开始之前（在动画延迟期间）获取第一个关键帧设置的样式值：

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}
亲自试一试 »

以下示例让 <div> 元素获取动画开始前第一个关键帧设置的样式值，并在动画结束时保留最后一个关键帧的样式值：

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}
亲自试一试 »

动画简写属性

下面的示例使用了六个动画属性：

示例

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
亲自试一试 »

使用简写可以实现和上面一样的动画效果animation属性：

示例

div {
  animation: example 5s linear 2s infinite alternate;
}
亲自试一试 »

通过练习测试一下

练习:

为 <div> 元素添加 2 秒的动画，将颜色从红色更改为蓝色。将动画命名为"example"。

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: ;
  : 2s;
}

@keyframes example {
  from {: red;}
  to {: blue;}
}
</style>

<body>
  <div>This is a div</div>
</body>

开始练习

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

❮ 上一节 下一节 ❯