Use css3-animation to make frame-by-frame animation, css3-animation Animation

Use css3-animation to make frame-by-frame animation, css3-animation Animation

Reference: https://www.qianduan.net/css3-animation/

Use css3-animation to make frame-by-frame animation

Common usage:

animation:mymove  4s ease-out 1s backwards; @-webkit-keyframes mymove /*Safari and Chrome*/{from {left:0px;}to {left:200px;}}

Explanation: mymove: keyframes name; 4 s: Total animation time; seek-out: Slow down when the animation ends; 1 s: Start animation after 1 second pause; backwards: return to the origin after the animation ends. Default Value: play once

Compatible with mainstream browsers:

. Test {-webkit-animation: <various attribute values >;- moz-animation: <various attribute values >;- o-animation: <various attribute values >;animation: <various attribute values> ;}

 

Animation-name, SpecifyingkeyframesYou can take the name as needed. However, we recommend that you use a name similar to the action name for future maintenance convenience. For example, to bind a running action, you can name it run.

Time. There are two times. The first one is the time required to finish the animation.animation-durationThe second time is the time when the animation starts to play.animation-delayThe two values can be written in seconds or in microseconds (1000 ms = 1 s.

Animation-timing-functionSpecifies the animation motion curve, which has nine values, respectivelyease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps([,[start|end]?) |cubic-bezier(x1, y1, x2, y2)

• ease: The animation starts slowly, then accelerates, and finally slows down. Default Value;
• linear: The animation speed is the same from start to end;
• ease-in: Starts at low speed;
• ease-out: End at low speed;
• ease-in-out: The animation starts and ends at low speed;

  Same effect (by step) steps
  . Test1 {background: url (http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;-webkit-animation: run 350 ms steps (1) infinite 0 s ;} @-webkit-keyframes run {0% {background-position: 0;} 20% {background-position:-90px 0;} 40% {background-position:-180px 0 ;} 60% {background-position:-270px 0;} 80% {background-position:-360px 0;} 100% {background-position:-360px 0 ;}}. test2 {background: url (http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;-webkit-animation: run 350 ms steps (5) infinite 0 s ;} @-webkit-keyframes run {100% {background-position:-pixel PX 0 ;}}

  Animation-iteration-count: Number of animation playback times. The default value is 1,infiniteIt is not limited. If it is set to no limit, the animation will be played continuously.

• Animation-directionSpecifies whether the animation is in the inverse direction.
  =normal|reverse|alternate|alternate-reverse 
  The first value is normal rotation. The default value is,reverseFor Reverse Rotation, alternate rotates normally at the beginning, and then reverse rotation after playing the video once.animation-iteration-count:1The value is invalid,alternate-reverseRotate in reverse direction at the beginning. After broadcasting once, rotate normally according to regression, rotate alternately, and setcountIf the value is 1, the value is invalid.
• Animation-play-stateTo define whether or not the animation is running or paused. This is a newly added property with two attribute values:runningAndpaused. The default value isnormal, The animation is played normally. For examplepaused, The animation is paused. If an animation starts to be a motionpausedThe animation is paused.running, The animation starts from the paused position.
• Animation-fill-modeDefines the State beyond the animation playback time. As the name suggests, it is either a State after the animation is played.animation-fill-mode:none|forwards|backwards|both;none, Do not change the default behavior after playing, default value,forwardsIt is the screen that stops at the end of the animation,backwardsThis is the first screen that appears when the animation is called back,bothThe application is in the animation end or start state.