CSS-animations

CSS-animations （CSS 动画）

CSS animations allow doing simple animations without using JavaScript. In this case, JavaScript is used for controlling the animation and making it better with a little code. （CSS动画允许在不使用JavaScript的情况下执行简单的动画。在这种情况下， JavaScript用于控制动画，并通过少量代码使其更好。）

CSS Transitions

CSS Transitions （CSS过渡）

Making CSS transitions is quite simple. You describe a property and the way its changes may be animated. Once the property is changed, the animation is painted by the browser. （制作CSS转换非常简单。您描述了房源及其更改的动画方式。属性更改后，浏览器将绘制动画。）

So, all you need is to change the property. （因此，您只需更改房源即可。）

Let’s consider an example where CSS is animating background-color changes:

.animated {
 transition-property: background-color;
 transition-duration: 5s;
}

In case an element has .animated class, any background-color is animated within 3 seconds. （如果元素具有.animated类，则会在3秒内对任何背景颜色进行动画处理。）

In the example below, click the button to see the animated background:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     #color {
       transition-property: background-color;
       transition-duration: 5s;
     }
   </style>
 </head>
 <body>
   <button id="color">Click on button</button>
   <script>
     color.onclick = function() {
       this.style.backgroundColor = 'green';
     };
   </script>
 </body>
</html>

Four properties describe CSS transitions. They are transition-property, transition-duration, transition-timing-function, and transition-delay. （四个属性描述CSS转换。它们是transition-property、transition-duration、transition-timing-function和transition-delay。）

The transition property allows declaring them together in the following sequence: property duration timing-function delay. It can also animate different properties at once.

For example, the button below is animating both the font-size and the color:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     #growing {
       transition: font-size 5s, color 3s;
     }
   </style>
 </head>
 <body>
   <button id="growing">Click on button</button>
   <script>
     growing.onclick = function() {
       this.style.fontSize = '36px';
       this.style.color = 'green';
     };
   </script>
 </body>
</html>

Now let’s take an overview of the properties. （现在，让我们概括一下属性。）

Transition Property

Transition Property （过度属性）

In the transition property, a list of properties is written to animate. For example, left, margin-left, height, color. However, not all properties can be animated. （在过渡属性中，属性列表被写入动画。例如， left、margin-left、height、color。但是，并非所有属性都可以动画化。）

Transition-duration

Transition-duration （过渡持续时间）

This property indicates the duration of the animation. In other words, in the transition-duration, you specify how long the animation should last. The time should be set in the CSS time format. It can be in seconds (s) or milliseconds (ms). （此属性指示动画的持续时间。换句话说，在过渡持续时间中，您可以指定动画应该持续多长时间。时间应以CSS时间格式设置。它可以以秒或毫秒(ms)为单位。）

Transition-delay

Transition-delay （过渡延迟）

In the transition-delay property, the delay before the animation is indicated. For example, if the transition-delay is 3s, then the animation starts 3 seconds after the change. （在transition-delay属性中，指示动画之前的延迟。例如，如果过渡延迟为3秒，则动画在更改后3秒开始。）

Here, negative values are also available. In this case, the animation will start from the middle. For example, if the transition-duration is 2s, the delay is -1s, then the animation will take 1 second starting from the half. （在这里，也可以使用负值。在这种情况下，动画将从中间开始。例如，如果过渡持续时间为2秒，延迟为-1秒，则动画将从一半开始花费1秒钟。）

Let’s have a look at the case where the animation shifts numbers from 0 to 9 with the CSS translate property:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     #digitId {
       width: .6em;
       overflow: hidden;
       font: 36px monospace;
       cursor: pointer;
     }
     #stripe {
       display: inline-block
     }
     #stripe.animate {
       transform: translate(-90%);
       transition-property: transform;
       transition-duration: 6s;
       transition-timing-function: linear
     }
   </style>
 </head>
 <body>
   Click below to animate:
   <div id="digitId">
     <div id="stripe">123456789</div>
   </div>
   <script>
     stripe.onclick = function() {
       stripe.classList.add('animate');
     };
   </script>
 </body>
</html>

The transform property is animated as follows:

#stripe.animate {
 transform: translate(-90%);
 transition-property: transform;
 transition-duration: 6s;
}

In the example, demonstrated above JavaScript adds to the element the class .animate for the animation to start:

stripe.classList.add('animate');

Transition-timing function

Transition-timing function （过渡时间功能）

The transition-timing function describes how the process of animation is distributed along the time. It is considered the most complicated property. This property accepts two types of values: a so-called Bezier curve or steps. We are going to start from the Bezier curve.

Bezier Curve

The timing function is set as a Bezier curve with four control points, satisfying the following conditions:

The first control point: (0,0). The last control point: (1,1). The values x must be in the interval 0..1, for the intermediate points, and y can be anything.

The syntax of the Bezier curve in CSS is the following: cubic-bezier(x2, y2, x3, y3)

Generally, the timing process specifies how fast the process of the animation goes in time. （一般来说，计时过程指定动画过程的速度。）

The time is the x axis: 0 – the moment of start, 1 – the last moment of the transition-duration.
The y axis indicates the completion of the process: 0 – the starting property value, 1 – the finishing value.

So, it is just a straight line. As the time (x) goes, the animation’s completion (y) passes from 0 to 1. （所以，这只是一条直线。随着时间(x)的推移，动画的完成(y)从0到1。）

See how the image is going from left to right with the permanent speed in the following example:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     .imgClass {
       position: relative;
       cursor: pointer;
       width: 200px;
       height: 140px;
       left: 0;
       transition: left 6s cubic-bezier(0, 0, 1, 1);
     }
   </style>
 </head>
 <body>
   <img class="imgClass" src="https://www.w3cdoc.com/uploads/media/default/0001/05/9eb9e9cba721ba3bb5e653751449173197f2924a.png" onclick="this.style.left='450px'">
 </body>
</html>

The curve is the basis for the CSS transition. A Bezier curve can also make the animation get out of its range. Any coordinates can be set for the control points of the curve. They can be even negative or huge. The curve itself will vary low or high and make the animation get beyond its standard range. （曲线是CSS过渡的基础。贝塞尔曲线还可以使动画超出其范围。可以为曲线的控制点设置任何坐标。它们甚至可能是负面的或巨大的。曲线本身会变低或变高，使动画超出其标准范围。）

The animation code will look like this:

.imgClass {
 left: 120px;
 transition: left 6s cubic-bezier(.3, -1, .3, 2);
 /* JavaScript sets left to 600px */
}

If you click the train you can see the following:

First of all, the train goes back: left is less than 120px.
Afterward, it goes forward, a bit farther than 600px. （-之后，它向前移动，略高于600像素。）
Then it goes back again – to 600px. （-然后再回到600像素。）

Here is another example:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     .imgClass {
       position: relative;
       cursor: pointer;
       width: 200px;
       height: 140px;
       left: 120px;
       transition: left 5s cubic-bezier(.3, -1, .3, 2);
     }
   </style>
 </head>
 <body><img class="imgClass" src="https://www.w3cdoc.com/uploads/media/default/0001/05/9eb9e9cba721ba3bb5e653751449173197f2924a.png" onclick="this.style.left='600px'"></body>
</html>

Steps

It is possible to split the animation into steps with the help of the timing function steps (number of steps[, start/end]). （借助计时功能步骤（步骤数[，开始/结束] ），可以将动画拆分为步骤。）

The example of a list of digits, without any animation, is shown below:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     #digitId {
       border: 1px solid green;
       width: 1.5em;
     }
     #stripeId {
       display: inline-block;
       font: 36px monospace;
     }
   </style>
 </head>
 <body>
   <div id="digitId">
     <div id="stripeId">0123456789</div>
   </div>
 </body>
</html>

You can make the digits appear separately by changing the part of the list outside of the red window to invisible and shifting the list to the left with every step. （您可以通过将红色窗口之外的列表部分更改为不可见，并随着每一步将列表向左移动，使数字单独显示。）

There can be nine steps. A step move for every digit looks like this:

#stripeId.animate {
 transform: translate(-90%);
 transition: transform 6s steps(9, start);
}

The action will look as follows:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     #digitId {
       width: .6em;
       overflow: hidden;
       font: 36px monospace;
       cursor: pointer;
     }
     #stripeId {
       display: inline-block
     }
     #stripeId.animate {
       transform: translate(-90%);
       transition-property: transform;
       transition-duration: 6s;
       transition-timing-function: steps(9, start);
     }
   </style>
 </head>
 <body>
   Click:
   <div id="digitId">
     <div id="stripeId">0123456789</div>
   </div>
   <script>
     digitId.onclick = function() {
       stripeId.classList.add('animate');
     }
   </script>
 </body>
</html>

Event Transitionend

Event Transitionend （事件过渡结束）

After the completion of the CSS animation, the transitionend event occurs. It is mainly used for acting after the animation is over. For example, here the ship starts swimming there and back on the click. The animation starts with the go function and re-runs every time the transition finishes and flips the direction, as follows:

img.onclick = function () {
 let times = 1;
 function animate() {
   if (times % 2) {
     // swim to the right
（向右）
     img.classList.remove('back');
     img.style.marginLeft = 100 * times + 150 + 'px';
   } else {
     // swim to the left
（//向左游）
     img.classList.add('back');
     img.style.marginLeft = 100 * times - 150 + 'px';
   }
 }
 animate();
 img.addEventListener('transitionend', function () {
   times++;
   animate();
 });
};

There are some unique properties in the event object for transition end. One of them is the event.propertyName: the property that has finished the animation. It is better when multiple properties are animated simultaneously. The second one is event.elapsedTime: the time that the animation took (in seconds). It doesn’t include transition-delay.

Summary

Summary （概要）

With the help of the CSS animation, you can smoothly animate changes of one or multiple CSS properties. They are mainly used for making simple animations and are handy for most animation tasks. But for most complex tasks, you can use JavaScript animations that are covered in the next chapter. （借助CSS动画，可以平滑地对一个或多个CSS属性的更改进行动画处理。它们主要用于制作简单的动画，适用于大多数动画任务。但对于大多数复杂的任务，您可以使用下一章中介绍的JavaScript动画。）

请遵守《互联网环境法规》文明发言，欢迎讨论问题

CSS-animations

CSS Transitions

Transition Property

Transition-duration

Transition-delay

Transition-timing function

Bezier Curve

Steps

Event Transitionend

Summary

人工客服

工单服务

投诉建议

CSS-animations

CSS Transitions #

Transition Property #

Transition-duration #

Transition-delay #

Transition-timing function #

Bezier Curve #

Steps #

Event Transitionend #

Summary #

人工客服

工单服务

投诉建议

CSS Transitions

Transition Property

Transition-duration

Transition-delay

Transition-timing function

Bezier Curve

Steps

Event Transitionend

Summary