AtoZ CSS屏幕录像：关键帧动画

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

Animation used to be the realm of JavaScript.

动画曾经是JavaScript的领域。

Now, in modern browsers, we can animate elements using CSS.

现在，在现代浏览器中，我们可以使用CSS为元素设置动画。

The @keyframes block and animation properties allow us to specify what gets animated and when.

@keyframes块和animation属性使我们可以指定要动画的对象和时间。

In this episode we’ll look at the kind of animations that are suited to CSS, the concept of specifying a series of @keyframes and finally the way these keyframes are combined with animation settings to bring the page to life.

在本集中，我们将介绍适合CSS的动画类型，指定一系列@keyframes的概念，以及最后将这些关键帧与animation设置组合以使页面栩栩如生的方式。

CSS中的动画 (Animations in CSS)

As CSS animations don’t have the deepest of browser support, they are best suited to visual flair rather than being a key part of the page content or design.

由于CSS动画没有最深的浏览器支持，因此它们最适合视觉效果，而不是页面内容或设计的关键部分。

Animations can run 1 or more times or loop infinitely. It’s also possible to add multiple animations to the same element.

动画可以运行1次或多次，也可以无限循环。 也可以将多个动画添加到同一元素。

Animations can be triggered in CSS as soon as the page loads, after a delay or via some kind of state based change like :hover, :focus, or :active which we looked at in “Episode 8: Hover“.

页面加载后，延迟或通过基于状态的更改(如我们在“ 第8集： Hover ”中介绍过)如:hover ， :focus或:active ，可以在CSS中触发动画。

CSS animations can also be started and stopped in Javascript by toggling the animation-play-state property. We’ll look at the other animation properties and syntax a bit later on.

CSS动画也可以通过切换animation-play-state属性在Javascript中启动和停止。 稍后，我们将介绍其他动画属性和语法。

关键帧 (Keyframes)

In order to animate an element (or selection of elements), we need to specify a series of keyframes.

为了给一个元素(或元素选择)设置动画，我们需要指定一系列关键帧。

The most basic form of keyframe animation goes from one set of styles at the beginning to another set of styles at the end, over a certain amount of time.

关键帧动画的最基本的形式去from一组风格在一开始to结束时另一套风格，在一定的时间。

During the animation, the styles between keyframes are automatically calculated by the browser – a process known as tweening.

在动画期间，关键帧之间的样式由浏览器自动计算-这个过程称为tweening 。

Each keyframe is defined as a style block of CSS properties that will be applied to any element that uses that set of keyframes.

每个关键帧定义为CSS属性的样式块，该样式块将应用于使用该关键帧set的任何元素。

@keyframes moveLeft {
  from {left: 0;}
  to   {left: 500px;}
}

Given this set of keyframes, the starting keyframe of the animation will look like this; and the ending one will look like this.

给定这组关键帧，动画的开始关键帧将如下所示； 最后一个看起来像这样

@keyframes grow {
  0%   {font-size: 20px;}
  75%  {font-size: 100px;}
  100% {font-size: 10px;}
}

Additional keyframes can be specified using a percentages syntax. If the animation duration was 10 seconds, over the first 7.5 seconds, the font-size of the element would grow to 100px and then over the next 2.5 seconds, it would shrink back down to 10px. You can specify as many properties as you like for each keyframe.

可以使用百分比语法指定其他关键帧。 如果动画持续时间为10秒，则在开始的7.5秒内，元素的font-size将增长为100px ，然后在接下来的2.5秒内，它将缩小为10px 。 您可以为每个关键帧指定任意数量的属性。

动画 (Animation)

When the @keyframes have been defined, they are ready to be used in conjunction with the animation-name property.

定义@keyframes ，就可以将它们与animation-name属性一起使用。

There are a series of animation properties to configure your animation as needed:

有一系列animation属性可根据需要配置动画：

• animation-name specifies the block of @keyframes to use

  animation-name指定要使用的@keyframes块

• animation-duration specified the time the animation lasts

  animation-duration指定了动画的持续时间

• animation-delay specifies any delay before the animation starts

  animation-delay指定动画开始之前的任何延迟

• animation-iteration-count specifies the number of times to repeat

  animation-iteration-count指定重复的次数

• animation-direction specifies the direction; animations can play forwards (normal), in reverse or alternate back and forth

  animation-direction指定方向； 动画可以向前播放(正常)，反向播放或来回播放

• animation-play-state allows the animation to be paused and resumed

  animation-play-state允许暂停和恢复动画

• animation-timing-function determines an acceleration curve of how the animation plays between keyframes

  animation-timing-function确定动画如何在关键帧之间播放的加速曲线

• animation-fill-mode determines how styles are applied before and after the animation

  animation-fill-mode确定在动画前后如何应用样式

These 8 properties can be combined into a shorthand animation property as follows:

可以将这8个属性组合为速记animation属性，如下所示：

.box {
  animation: name duration delay count direction play-state timing fill-mode;
}

The only required properties for an animation to be visible at least once are: animation-name and animation-duration.

动画至少可见一次所需的唯一属性是： animation-name和animation-duration 。

弹跳球动画 (Bouncing ball animation)

Let’s look at a practical example.

让我们看一个实际的例子。

We can create a ball using an equal width and height box with border-radius set to 100%. We can make the ball bounce up and down by asbolutely positioning it and animating the top or bottom values over time.

我们可以通过平等创建一个球width和height框border-radius设置为100% 我们可以通过大胆地定位球并设置其随着时间推移的top或bottom值的动画来使球上下反弹。

We can give the ball a bit more realism by squashing it at the bottom of the animation before having it travel back up, at a slightly slower speed.

我们可以通过稍微慢一点的速度将球压回动画中，然后再返回动画，使球更具真实感。

.ball {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  animation: bounce 3s linear infinite;
}
@keyframes bounce {
  0% {bottom: 100%;}
  25% {
    bottom: 0;
    width: 100px;
    height: 100px;
  }
  30% {
    bottom: 0;
    height: 50px;
    width: 110px;
  }
  35% {
    bottom: 0;
    width: 100px;
    height: 100px;
  }
  70% {
    bottom: 100%;
  }
  100% {
    bottom: 100%;
  }
}

We can make the ball move across the screen by adding a second animation that animates the left property of the ball. These can be comma separated, so they are both applied to the same element.

我们可以通过添加第二个动画来使球在屏幕上移动，该动画将球的left属性设置为动画。 这些可以用逗号分隔，因此它们都应用于同一元素。

To make it appear as though the ball bounces slowly across the screen, we can increase the duration of this second animation.

为了使其看起来好像球在屏幕上缓慢弹起，我们可以增加第二个动画的持续时间。

@keyframes moveLeft {
  from {left: 0;}
  to   {left: 100%;}
}
.ball {
  animation: bounce 3s linear, moveLeft 12s linear infinite;
}

浏览器支持 (Browser support)

CSS animations are not supported in IE9 or below or Opera Mini. In IE10, IE11 and Firefox, the @keyframes and animation properties are unprefixed but -webkit prefixes are needed everywhere else.

IE9或更低版本或Opera Mini不支持CSS动画。 在IE10，IE11和Firefox中， @keyframes和animation属性没有前缀，但在其他任何地方都需要-webkit前缀。

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

翻译自: https://www.sitepoint.com/atoz-css-screencast-keyframe/