Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The road is difficult, the road is difficult, sweat, full of long. A hundred miles under foot, a sunny day overhead. Firm as a rock, faith like fire. Good boy, people poor ambition is not lack, the way of Heaven also pay frequently. Walk everywhere, walk everywhere, be bold and bold. The bumpy road ahead is hard to stop. If the heart has a bright light, the body is like prajna. My hero, aim high, everywhere is home.

animation

What is animation

CSS3’s new animation property makes it possible to animate only CSS style properties. The implementation animation consists of the following parts:

  • Style rules for defining animations.
  • Keyframes used to set the start, end, and midpoint styles of the animation.

Relative to traditional use. The animation property added in CSS3 has the following three advantages:

  • It’s easy to create simple animations without even having to master them. JavaScript.
  • Animation works well and can run on low performance systems. Performance and smoothness are superior to animations implemented in JavaScript.
  • Allows the browser to optimize the performance and effects of animations, giving the browser control over animation sequences.

Animation attributes

The CSS animation property is a shorthand property for creating complex animation sequences and controlling the style properties of the CSS to animate them.

This property can be broken down into the following style properties:

  • Animation-name: specifies the name of the keyframe animation. The value must correspond to the @keyframes rule.
  • Animation-duration: Sets the duration of animation execution.
  • Animation-timing -function: sets the animation execution mode, similar to the transition-timing -function property.
  • Animation-delay: Sets the time to wait before executing the animation.
  • Animation-rotund-count: Sets the number of iterations for animation execution.
  • Animation-direction: Sets the direction of animation execution.
  • Animation-play – -state: Sets the state of animation execution.
  • Animatio-fill-mode: Used to set the out-of-time properties of the animation.
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Simple animation effects</title>
    <style>
        /* Animation @keyframes myimate {keyframes that perform the animation process} */
         @keyframes myimate {
            from {
                width: 200px;
            }
            to {
                width: 500px; }}/* In the corresponding style block, * animation-name - sets the name of the animation currently used * animation-duration - Sets the duration of the animation currently executed * animation-delay - Wait time before execution begins * Animation-rotund-count - Sets the current animation execution times */
        .container {
            width: 200px;
            height: 200px;
            background-color: aqua;
​
            animation-name: myimate;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
Copy the code

Check CSS animation support

To animate with CSS3’s new animation property, you first need to verify that the current browser supports the style property.

var animation = falpse,
    animationstring = 'animation',
    keyframeprefix= ", domPrefixes = 'Webkit Moz 0 ms Khtml'.split(''), pfx='', elm = document.createElement('div'); If (elm) style) animationName! == undefined ) { animation = true; } if( animation === false){ for( var j= 0; i< domPrefixes.length; i++ ){ if( elm.style[ domPrefixes[i] + 'AnimationName' ] ! == undefined ){ pfx = domPrefixes[ i]; animationstring = pfx + 'Animation'; keyframeprefix = '-' + pfx.toLowerCase() +'-'; animation = true; break; }}}Copy the code

@keyframes declares animations

This is done by creating two or more keyframes using @keyFrames. Each keyframe describes how the animation element should be rendered at a given point in time.

@keyframes <keyframes-name> {
<keyframe-block-list>
}
Copy the code
  • Keyframes -name: Sets the name of the current animation to be invoked by the animation-name property.
  • Keyframe-block-list: used to set key frames during animation execution.

Call the @keyFrames animation

After the animation sequence is created using @keyframes, the animation property or animation-name property is used.

@keyframes 'slideteft' {
    0% { left: -500px; }
    100% { left: 0; }}.slideLeft:target {
    z-index: 100;
    animation-name: slideLeft;
    animation-duration: 1s; 
    animation-iteration-count: 1;
}
Copy the code

Invoke the animation by name

The animation-name. property applies a specified set of animations, each animation name defined by the @keyframes rule.

/* Single animation */
animation-name: none;
animation-name: test_ 05;
​
/* Multiple animations */
animation-name: test1, arimation4;
Copy the code

Set the animation execution time

The animation-dur property is used to set the animation execution duration. The default value is 0 seconds, indicating no animation effect.

animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s.15s;
Copy the code

Sets the animation execution mode

The animation-timing-fu nction property is used to set the animation execution mode.

/* Keyword values */
animation-timing-function: ease; 
animation-timing function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing function: stepTstart;
animation-timing-function: step-end;
​
/* Function values */
animation-timing-function: cubic-bezier(0.1.0.7.1.0.0.1);
animation-timing-function: steps(4, end);
Copy the code

Set the animation delay time

The animation-delay property sets the time to wait before the animation starts. The default value is O seconds, indicating that the animation is executed immediately.

animation-delay: 3s;
animation-delay: 2s.4ms; 
Copy the code

Sets the number of times the animation is executed

The animation-rotund-count property sets the number of times the animation is executed. The default value is 1, which means that the animation is executed only once.

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3; 
Copy the code

Sets the direction of animation execution

The animation-direction property sets whether the animation is executed in reverse.

animation-direction: normal; 
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
Copy the code

Sets the animation execution state

The animation-play -state property sets whether the animation is running or paused. This style property allows you to determine whether the animation is executing.

animation-play-state: running;
animation-play-state: paused;
Copy the code

Sets animation out-of-time properties

The animation-fill-mode property sets how to apply styles to the target elements of the animation before and after animation execution.

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animationf-ill-mode: both;
Copy the code