本文共 6565 字,大约阅读时间需要 21 分钟。
This screencast is a part of our AtoZ CSS Series. You can find other entries to the series .
该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在找到该系列的其他条目。
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
设置组合以使页面栩栩如生的方式。
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 “ Hover
“.
页面加载后,延迟或通过基于状态的更改(如我们在“ 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中启动和停止。 稍后,我们将介绍其他动画属性和语法。
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
。 您可以为每个关键帧指定任意数量的属性。
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
。
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;}
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!
请留意即将发布的“快速提示”文章!
翻译自:
转载地址:http://gzrgb.baihongyu.com/