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

Source: Internet
Author: User

Use css3-animation to make frame-by-frame animation, css3-animation 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 ( 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 ( 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.
    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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.