0, write first

In this article, I will explain how to use transition in detail. It can be a friendly transition, but it has limited functions. If you want to achieve beautiful animations, you can use the following steps: Today, we will invite animation, the protagonist, to come on stage. First, let’s look at the animation’s properties:

attribute describe css
@keyframes Provisions of the animation 3
animation Short for all animation properties except animation-play-state 3
animation-name Specifies the name of the @keyframes animation 3
animation-duration Specifies how long the animation takes to complete a cycle. Default is 0 3
animation-timing-function Specify the speed curve for the animation, which defaults to ease 3
animation-iteration-count Specifies the number of times the animation should be played. The default is 1 3
animation-direction Specifies whether the animation is played backwards in the next cycle 3
animation-play-state Specifies whether the animation is running or paused. The default is running 3
animation-fill-mode States outside the specified animation time 3

Wow ~~~, so much, what ghost ah, forget it, don’t look! Wait a minute, this article will illustrate each of these properties in a lively, easy-to-understand way with examples. Don’t believe it? Keep reading if you don’t believe me.

1. Browser support

From the website Can I Use, we Can find that currently only IE10 and above supports animation properties. Internet Explorer 10, Firefox, and Opera support animation properties. Safari and Chrome support the alternative -webkit-animation property. To save space, the browser is omitted from all the examples in this article.

2, CSS Animation properties in detail

2.1 animation

To use animation, you specify the name of the animation and how long it will take to complete a cycle. Animation is a compound property with the following properties:

animation:[ || || || || || ][, [ || || || || || ] ]*

You can write each property individually, or you can use the animation compound property directly. You can reduce the amount of code by using compound attributes, so why not?

The functions and usage of each property of the animation will be detailed in the following sections with examples.

2.2 @keyframes

The @keyframes keyword can be used to define the states of an animation as follows:

@keyframes rainbow {
  0% {
    background-color: #cd0000; 50%} {background-color: deeppink; 100%} {background-color: blue; }}Copy the code

Rainbow is the name of the animation. Also, we can use from instead of 0% and to instead of 100%, so the above is written the same as the following:

@keyframes rainbow {
  from {
    background-color: #cd0000;
  }
  50%{
    background-color: deeppink;
  }
  to {
    background-color: blue; }}Copy the code

2.3 animation – the name

Usage:

animation-name: none | NAME[,none | NAME]*;

Specify the name of the animation immediately following @keyframes. The @keyframes rule will be applied to the animation when CSS loads. The default value is None and there is no animation.

2.4 animation – duration

Usage:

animation-duration:

Specifies the duration of the animation. The default is 0, indicating no animation. The unit can be ms or s. If you ignore the duration, the animation will not allow it because the default value is 0.

<div class="demo1"></div>
Copy the code
.demo1{
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.demo1:hover{
  animation: 5s rainbow;
}

@keyframes rainbow {
  0% {
    background-color: #cd0000;
  }
  50%{
    background: deeppink; 100%} {background: blue; }}Copy the code

It looks like this in the browser:

In this example, we specified the name of the animation to be Rainbow, set the animation duration to 5s, and split the animation into three frames. So, before hover, the background color is yellow, while while hover, the background changes to # CD0000, that is 0% of the background color; The background color is deeppink 50% of the time and blue 100% of the time.

2.5 animation – timing – function

Usage:

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*

Specifies the animation playback mode. The default value is ease, supporting Linear, ease, ease-in, ease-out, ease-in-out, cubic- Bezier (n,n,n), and steps.

 <div class="demo2">
   <h3>ease</h3>
   <div class="box box1"></div>
   <h3>linear</h3>
   <div class="box box2"></div>
   <h3>ease-in</h3>
   <div class="box box3"></div>
   <h3>ease-out</h3>
   <div class="box box4"></div>
   <h3>ease-in-out</h3>
   <div class="box box5"></div>
</div>
Copy the code
.box{
  position: relative;
  width: 50px;
  height: 50px;
  color: #fff;
  margin-top: 10px;
}
.box1{
  background-color: red;
  animation: box-a 5s ease;
}
.box2{
  background-color: deeppink;
  animation: box-a 5s linear;
}
.box3{
  background-color: blue;
  animation: box-a 5s ease-in;
}
.box4{
  background-color: darkgreen;
  animation: box-a 5s ease-out;
}
.box5{
  background-color: yellow;
  animation: box-a 5s ease-in-out;
}

@keyframes box-a {
  0%{
    left: 0;
  }
  100%{
    left: 500px; }}Copy the code

It looks like this in the browser:

In this example, we have the same transition curve that we have in transition:

  • Ease begins and ends slowly (default)

  • Ease-in Start slowly

  • Ease-out ends slowly

  • Ease -in-out Start or end slowly

  • Linear uniform

    ​

2.6 animation – delay

Usage:

animation-delay:

Specifies the delay for the animation to start playing. The default is 0, in ms or s.

<div class="demo3"></div>
Copy the code
.demo3{
  position: relative;
  width: 50px;
  height: 50px;
  background-color: yellow;
  animation: demo3-a 1s 5s;
}
@keyframes  demo3-a  {
  0%{
    left: 0;
    background-color: deeppink;
  }
  100%{
    left: 500px;
    background-color: blue; }}Copy the code

It looks like this in the browser:

In this example, the animation execution period is specified as 1s. When hover, the animation does not execute immediately, but is delayed for 5s.

2.7 animation – iteration – count

animation-iteration-count:infinite | [, infinite | ]*

Specifies the number of times the animation is played. The default value is 1, indicating that the animation is stopped after it has played. In addition to specifying a number, you can also set the keyword infinite to indicate an infinite loop.

<div class="demo4"></div>
Copy the code
 .demo4{
        position: relative;
        width: 50px;
        height: 50px;
        background-color: yellow;
        animation: demo4-a 2s 3s 3;
    }
    @keyframes  demo4-a  {
        0%{
            left: 0;
            background-color: deeppink;
        }
        100%{
            left: 500px;
            background-color: blue; }}Copy the code

It looks like this in the browser:

In this example, we specify 3 times for the animation to play, so the animation stops playing after 3 times. If we modify a line above:

animation: demo4-a 2s 3s inifinite; , specifies that the animation will play indefinitely, so the animation will play forever.

Using animation-rotund-count :infinite, we can achieve a heart beating effect. If you are not familiar with HTML code, you can ignore it and look directly at CSS code.

<div class="heart">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 450">
    <defs>
      <radialGradient id="gradient" cx="35%" cy="30%">
        <stop stop-color="red" />
        <stop stop-color="# 900" offset="100%" />
      </radialGradient>
      <radialGradient id="glow">
        <stop stop-color="white" stop-opacity=8 "." offset="60%" />
        <stop stop-color="white" stop-opacity="0" offset="100%" />
      </radialGradient>
    </defs>
    <path d="M140, 0 c - 137.446907-2.4711-264.638405, 212.481001, 105.92601, 435.341002 c0.405975, 0.730988 1.968994, 0.730988 2.375, 0 c382. 517975, 230.048996, 234.665009, 451.640422, 92.625977-434.390902 - c - 55.372986, 6.724501-81.503998, 37.456499 C - 12.30899-93.813995, 63.888002, 26.431503, 38.440002, 57.163502-93.812988-63.888002 - c - 4.438004, 0.539301 8.866013, 0.870199-13.300003, 0.949999 l0, 0.000101 z" id="path2361" fill="url(#gradient)"/>
    <circle r="10%" cx="25%" cy="25%" fill="url(#glow)" />
  </svg>
</div>
Copy the code
.heart{
  margin: 100px;
  width: 200px;
  height: 200px;
  animation: pound 1s infinite;
}
@keyframes pound {
  from{
    transform: none;
  }
  to{
    transform: scale(1.2); }}Copy the code

It looks like this in the browser:

In this example, we specify the animation to be played an infinite number of times, and at 100% of the time, the effect of a heartbeat is achieved by magnifying it to 1.2 times. Isn’t that cool?

2.8 animation – direction

Usage:

animation-direction: normal | alternate [, normal | alternate]*

Specify the direction of the animation to play. Support the normal, alternate, and alternate-reverse keywords.

Normal, the default value, indicates that the animation is normally played.

Alternate: plays animation in an odd number of times (1,3,5…) Play normally, and even times (2,4,6…) Reverse playback;

Alternate -reverse is the exact opposite of alternate, i.e. in odd times (1,3,5…). Play backwards, and even times (2,4,6…) Forward play.

Look at the examples to understand:

<h3>normal</h3>
<div class="box box11"></div>
<h3>alternate</h3>
<div class="box box12"></div>
<h3>alternate-reverse</h3>
<div class="box box13"></div>
Copy the code
.box11{
  background-color: red;
  animation: box-a 5s normal infinite;
}
.box12{
  background-color: deeppink;
  animation: box-a 5s alternate infinite;
}
.box13{
  background-color: blue;
  animation: box-a 5s alternate-reverse infinite;
}
@keyframes box-a {
  0%{
    left: 0;
  }
  100%{
    left: 500px; }}Copy the code

This works like this in the browser:

I’m not going to go into the details of this example, but it’s very simple. Animation-direction: animation-direction: animation-direction: animation-direction: animation-direction

 <div class="blink">Look at me flash five times</div>
Copy the code
.blink{
  display: table-cell;
  vertical-align: middle;
  width: 120px;
  height: 50px;
  background-color: deeppink;
  color: #ffffff;
  animation: 0.5 s blink-a 5 alternate;
}
@keyframes  blink-a{
  to{
    color: transparent; }}Copy the code

It looks like this in the browser:

In this example, we specify animation-direction as alternate, and the animation runs 5 times.

2.9 animation – play – the state

animation-play-state:running | paused [, running | paused]*

Specifies the state of the animation to play. The keywords running, paused are supported. Among them:

Running, the default, indicates that the animation is playing.

Paused, which means to pause the playback. Can use this property: in Javascript object. The style.css. AnimationPlayState = “paused” suspended animation.

 <div class="demo5"></div>
Copy the code
.demo5{
  width: 100px;
  height: 10px;
  background-color: deeppink;       
}
.demo5:hover{
  animation: spin 3s linear infinite;      
}
@keyframes spin {
  to{
    transform: rotate(1turn); }}Copy the code

It looks like this in the browser:

In this example, we specify the animation to play for 3s, an infinite loop. When the mouse is moved away, the animation returns to its original state. What if we want to keep the animation running while mouse over? Take a look below:

 .demo5{
        width: 100px;
        height: 10px;
        background-color: deeppink;
        animation: spin 3s linear infinite;
        animation-play-state: paused;
    }
    .demo5:hover{
        animation-play-state: running;
    }
    @keyframes spin {
        to{
            transform: rotate(1turn); }}Copy the code

Running in a browser looks like this:

We made a few changes to the CSS code to keep the animation playing when the mouse moved away.

Animation – fill – 2.10 mode

Specifies attributes outside of animation time. Keywords none, forwards, backwards, both are supported.

None, the default value, indicates that the animation is restored to its original state after it has finished playing.

Forwards: after the animation is finished, the last frame of *@keyframes* will be preserved.

Backwards, said began to play the animation application * @ keyframes * in the first frame properties, play the complete, restore to the original state, usually set the animation – after the delay, can see effect.

Both for forwards and forwards.

Take an example:

<h3>none</h3>
<div class="box"></div>
<h3>forwards</h3>
<div class="box forwards"></div>
<h3>backwards</h3>
<div class="box backwards"></div>
<h3>both</h3>
<div class="box both"></div>
Copy the code
.box{
  position: relative;
  width: 50px;
  height: 50px;
  background-color: deeppink;
  color: #fff;
  margin-top: 10px;
  animation: mode-a 5s 1 2s;
}
.forwards{
  animation-fill-mode: forwards;
}
.backwards{
  animation-fill-mode: backwards;
}
.both{
  animation-fill-mode: both;
}
@keyframes mode-a {
  from {
    left:0;
    background-color: green;
  }
  to{
    left: 500px;
    background-color: blue; }}Copy the code

To be honest, I didn’t know what the difference was at first, but when I wrote a demo and compared it to myself, oh, that’s it.

The background color is Deeppink before animation plays.

None, the background color of the animation will change to green at the moment the animation is played, and it will return to the initial state after the animation is played.

Forward at the moment of animation playback, the background color of the animation changes to green. After the animation is finished, the background color of the last frame remains blue. Since the animation will be restored to the original state by default, the animation will be moved back to the original state.

Backwards: Once moving backwards, the background color of the animation will change to green and remain in its original state (i.e. deeppink).

Forwards and forwards. At the moment of animation playback, the backwards properties are applied, the background color of animation changes to green, the forwards properties are applied after playback, and the last frame properties are maintained after playback. Keep the background color blue;

3. Write at the end

That concludes the animation property. Each property of animation is not difficult to understand, but how can we use these properties to write cool animation effects? Nothing can be done overnight. Think and write more. That’s the secret.

Finally, I recommend a well-known animation library called inanimate. CSS and loading effects

Thanks for reading!

reference

  1. Introduction to CSS Animation
  2. CSS 3 animation is introduced
  3. W3school

You may wish to pay attention to my wechat public account “Front-end Talkking”.