animation

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 中的 animation 属性可用于为许多其他 CSS 属性设置动画,例如 colorbackground-colorheightwidth。每个动画都需要使用 @keyframes at-rule 进行定义,然后通过 animation 属性调用,如下所示

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

每个 @keyframes at-rule 定义在动画期间特定时刻应该发生的事情。例如,0% 是动画的开始,100% 是动画的结束。然后,可以通过简写 animation 属性或其八个子属性来控制这些关键帧,从而更好地控制如何操作这些关键帧。

子属性

  • animation-name:声明要操作的 @keyframes at-rule 的名称。
  • animation-duration:动画完成一个循环所需的时间长度。
  • animation-timing-function:建立预设的加速曲线,例如 easelinear
  • animation-delay:元素加载与动画序列开始之间的时间(一些很酷的示例)。
  • animation-direction:设置循环后动画的方向。其默认值在每个循环中重置。
  • animation-iteration-count:动画应执行的次数。
  • animation-fill-mode:设置在动画之前/之后应用哪些值。
    例如,您可以将动画的最后状态设置为保持在屏幕上,或者可以将其设置为在动画开始时切换回之前状态。
  • animation-play-state:暂停/播放动画。

然后可以像这样使用这些子属性

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

以下是每个子属性可以取哪些值的完整列表

animation-timing-functionease、ease-out、ease-in、ease-in-out、linear、cubic-bezier(x1, y1, x2, y2)(例如 cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-durationXs 或 Xms
animation-delayXs 或 Xms
animation-iteration-countX
animation-fill-modeforwards、backwards、both、none
animation-directionnormal、alternate
animation-play-statepaused、running、running

多个步骤

如果动画具有相同的起始和结束属性,则在 @keyframes 中使用逗号分隔 0% 和 100% 值很有用

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

多个动画

您也可以使用逗号分隔值来在选择器上声明多个动画。在下面的示例中,我们希望在 @keyframe 中更改圆圈的颜色,同时使用另一个动画将其左右移动。

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

性能

为大多数属性设置动画 (是一个性能问题),因此在为任何属性设置动画之前,我们应该谨慎行事。但是,某些组合可以安全地设置动画

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

哪些属性可以设置动画?

MDN 有 一个可以设置动画的 CSS 属性列表。可设置动画的属性往往是颜色和数字。例如,一个不可设置动画的属性是 background-image

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持此功能。

桌面

ChromeFirefoxIE

EdgeSafari
4*5*10125.1*

移动/平板

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274*6.0-6.1*

更多信息