css animation transition and animation

Reference article: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

1. transition basic usage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }
      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s; // If you do not use a mouse to move immediately change when the transition img above, coupled with the process of this property, it will continue to change one second
      }
      img:hover {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <img src="./o_200404110308weixin_20191025171935.jpg" alt="" />
  </body>
</html>

　We can also specify the height or width property changes, etc.

      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s height;
      }

　The wording means that only the img height attribute excessive duration of 1s, if you want to change the height variation in width, you can specify the delay parameter

      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s height, 1s 1s width;
      }

　　State rate of change transiton default is not uniform, but gradually slow down, which is called ease

      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s height, 1s 1s width ease;
      }

　　In addition to the value of ease, there are additional modes

1. linear: uniform
2.ease-in: from slow to fast
3.ease-out: from fast to slow
4.cubic-bezier function: Custom speed mode

　　cubic-bezier can use tools URL: https://cubic-bezier.com/#.17,.67,.83,.67 to customize

img{
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}

　　Use transition Notes:

　　　　1. At present the major browsers already support unprefixed transition, it can be very safe to use

　　　　2. Not all css attributes are supported transition

　　　　3. transition need to clearly know the specific values start and end states, that is set if the start or end of that height: auto, it does not animate, there is a similar situation, display: none to block background: url (foo, jpg) to url (bar.jpg), etc.

transition of limitations:

　　　　1. transiton required to trigger an event, so I can not triggered automatically when the page loads

　　　　2.transition is disposable, can not repeat itself, unless triggered again

　　　　3.transition only two states

2.Animation

　　First, css Anmiation need to specify the animation cycle duration

      .donghua {
        animation: 1s rainbow;
      }

　　The code above table design, .donghua this class to add an animation, we need to define rainbow animation animation effect

      @keyframes rainbow {
        0% {
          background: red;
        }
        50% {
          background: orange;
        }
        100% {
          background: yellowgreen;
        }

　　Trigger animations

    <div id="div1"></div>
    <button onclick="donghua()">点我</button>
    <script>
      let div1 = document.getElementById('div1')
      function donghua() {
        div1.classList.add('donghua')
      }
    </script>

　　By default, the animation will only play once, adding infinite key allows unlimited play animation

      .donghua {
        animation: 1s rainbow infinite;
      }

　You can also specify a specific number of times to play back movies

      .donghua {
        animation: 1s rainbow 3;
      }

　　After the end of the animation, it will immediately jump back to the initial state from the end of the state. If you want to keep the animation can be used at the end of the state

animation-fill-mode properties.

      .donghua {
        animation: 1s rainbow forwards;
      }

　　Other values of the animation-fill-mode

1. none: default back to the beginning of the animation did not state
2.backwards: Let animation back to the state of the first frame
3.forwars: End state

　　Sometimes, animation playback suddenly stops, then the default jump back to the beginning of the animation status, location, if you want to keep the end of the animation, using animation-play-state property

      .donghua {
        animation: 1s rainbow infinite;
        animation-play-state: paused;
      }
      .donghua: hover {
        animation-play-state: running;
      }