CSS3 animation

  take a look at the following effects. Can you use css animation?

Urban hotspot map Typewriter effect Running bear

  if you don't know, take a look at the following animation introduction about CSS3! Learn CSS3 animation at one time.

   animation is one of the important features in CSS3. You can set multiple nodes to accurately control one or a group of animation, which is often used to achieve complex animation effects. And transition Differences between:

   transition: a simple animation that requires a mouse to enter and other events to move

   Animation: complex animation, which can move by itself, can play automatically, and has more control.

1, Basic use of animation

  animation is made in two steps:

• Define the animation first
• Use (call) animation

   define animation sequence with @ keyframes (similar to defining class selector)

@keyframes run {	/* You can also use the keywords "from" and "to" (representing 0% (start) and 100% (finish))*/
    0%{      /* Start state */

    }
    100%{      /* End state */

    }
}

2, Animation attribute call

• Animation: sets the shorthand attributes for all animation attributes.

  You must have at least an animation name and animation duration.

• Animation name: animation name [required attribute]

• Animation duration: animation duration [required attribute]

  In seconds or milliseconds, the default value is 0s, that is, the animation is not played.

• Animation timing function: Specifies the speed curve of the animation.

  ease - (default) specifies an animation that starts slowly, then speeds up, and then ends slowly.

  linear - specifies an animation with the same speed from start to end (uniform speed).

  Ease in - specifies an animation that starts slowly.

  Ease out - specifies an animation that ends slowly.

  Ease in out - specifies to start and end slower animations.

  steps(int,start|end) - complete the animation in several steps during the animation duration. There are two parameters. The first parameter specifies the number of steps of the motion, which is a positive integer (greater than 0). The second parameter is optional, indicating whether the animation is continuous from the beginning or end of the time period. The meanings are as follows:

  • Start: indicates direct start.
  • End: the default value, indicating an abrupt end.

  Cubic Bezier (n, N, N, n) - its own value in the cubic Bezier function. Possible values are values from 0 to 1.

• Animation delay: Specifies the delay before the animation starts.

• Animation iteration count: Specifies the number of times the animation should be played.

  n - a number that defines the number of times the animation is played. The default is 1.

  infinite - specifies that the animation plays indefinitely.

• Animation direction: Specifies whether the animation should be played back in turn.

  normal - the animation plays normally (forward). Default value

  reverse - the animation plays in the opposite direction (backward).

  alternate - the animation plays forward and then backward.

  Alternate reverse - the animation plays back first and then forward.

• Animation fill mode: Specifies the style of the element when the animation is not played (before the beginning, after the end, or both).

  none - (default) animation does not apply any styles to the target element before and after the animation is executed.

  forwards - the state in which the element calling the animation stops at the end of the animation.

  backwards - the animation applies the attribute values defined in the keyframes that start the first iteration of the animation during the animation delay definition.

  both - Animation follows the rules of forwards and backwards. That is, animation expands animation attributes in two directions.

  initial - sets the property to its default value. see also initial.

  inherit - inherits the attribute from the parent element. see also inherit.

• Animation play state: Specifies whether the animation is run or paused.

  running - (default) specifies the animation run

  Paused - specifies that the animation is paused

  as soon as the production page is opened, a box repeatedly moves back and forth at a uniform speed from the upper left and lower right

<style>
   @keyframes run {
       0%{
            transform: translate(0px,0px);		/* Start position */	
       }
       100%{
            transform: translate(200px,200px);	/* End position */
       }
   }
   div{
       width: 100px;
       height: 100px;
        border-radius: 50%;
       background-color: red;
       animation-name: run;                 /* Motion animation name */
       animation-duration: 1s;              /* Exercise duration 1s */
       animation-iteration-count:infinite;  /* Infinite motion */
       animation-direction: alternate;      /* First forward motion, then reverse motion */
       animation-timing-function: linear;   /* Uniform motion */
   }
</style>
<body>
    <div></div>
</body>

   the percentage in the animation sequence can be written in two stages, from 0% to 100%, indicating the proportion of the total animation time spent moving to the corresponding state.

3, Animation abbreviation properties

   Animation: animation name duration motion curve delay start playback times whether the animation ends in the opposite direction

  there is no animation play state in the short attribute.

4, Animation case

• Hot map cases: Map picture

<body>				<!-- html -->
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
</body>

<style>			/* css */
    body {
        background-color: #333;
    }
    .map {
        position: relative;
        width: 747px;
        height: 616px;
        background: url(./images/map.png) no-repeat;
        margin: 0 auto;
    }
    .city {
        position: absolute;
        top: 227px;
        right: 193px;
        color: #fff;
    }
    .dotted {
        width: 8px;
        height: 8px;
        background-color: #09f;
        border-radius: 50%;
    }
    .city div[class^="pulse"] {
        position: absolute;
        /* The next three lines are guaranteed to be in the middle of the parent box */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px #009dfd;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
    }
    .city div.pulse2 {
        animation-delay: 0.4s;
    }
    .city div.pulse3 {
        animation-delay: 0.8s;
    }
    @keyframes pulse {
        0% {}
        70% {
            width: 40px;
            height: 40px;
            opacity: 1;		/* transparency */
        }
        100% {
            width: 70px;
            height: 70px;
            opacity: 0;
        }
    }
</style>

• Typewriter effect: realized by step() function in speed curve attribute

<style>		/* css */
    div{
        overflow: hidden;
        font-size: 20px;
        white-space: nowrap;	/* The text is displayed in one line */
        animation: w 3s steps(10) forwards infinite;
    }
    @keyframes w {
        0%{
            height: 30px;
            width: 0px;}
        100%{
            height: 30px;
            width: 200px;
        }
    }
</style>
<body>		<!-- html -->	
    <div>Demonstrate the typewriter effect here</div>
</body>

• White bear running: the white bear runs from the left to the middle, and then runs in place. Or using step() and pictures White bear picture

<style>         /* css */
    body {
        background-color: #A6A5A5;
    }
    div{
        position: absolute;
       width: 200px;
       height: 100px;
       background: url(./images/bear.png);
        /* Both animations can be played at the same time, separated by commas */
       animation: run 1s steps(8) infinite, move 3s linear forwards;
    }
    @keyframes run {
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -1600px 0;
        }
    }
    @keyframes move {
        0%{
            top: 0;
            left: 0;
        }
        100%{
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    }
</style>
<body>      <!-- html -->
    <div></div>
</body>