Home > Developer > Web Develop

Animation CSS3 Animation Summary

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Recently a small game project used CSS3 animated properties, such as transition, transform, animation. After three weeks, finally finished, use the weekend to comb a good summary.

  2. KeyFrames
    This property is used to define a series of keyframes. That is the middle point in the whole process of the animation running.

    Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation properties.

    Chrome and Safari need a prefix of-webkit-.


  4. Properties of the animation

  6. Animation abbreviation
    name Duration timing-function Delay Iteration-count direction;
  7. understanding of some key difficulties
    Animation-delay
    This property is required to wait a few seconds before the animation starts. It was a good idea, but there was a question: if my animation was executed several times in a row, would it be delayed before the first execution or would it be delayed before each execution? The answer is: only the first time.
    1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title>delay</title>6<meta name= "viewport" content= "width=device-width, initial-scale=1"/>7 8<style type= "Text/css" >9@-webkit-keyframes delay{Ten          One99%{ A-webkit-transform:translate (100px,0); -         } -         the     } - . delay{ -  - width:100px;height:100px; +Background-color: #000; --webkit-animation:delay 1s linear 2s infinite; + animation:delay 1s linear 2s infinite; A     } at</style> - -<body> -<div class= "Delay" ></div> -</body> -
  8. Animation-fill-mode
    This property has four values
    None: Default value. Do not set state outside of object animation
    Forwards: Sets the state of the object at the end of the animation
    Backwards: Sets the state of the object when the animation starts
    Both: Sets the state of an object to the end or start of an animation
    What's the difference between the three and the first. Online also looked for, found online said a bit wrong. At least I tried it. The effect of forwards and both is identical. It's all about where the animation is running and where it's parked. As for backwards, it is always stopped at the beginning of the state.
    1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title>delay</title>6<meta name= "viewport" content= "width=device-width, initial-scale=1"/>7 8<style type= "Text/css" >9@-webkit-keyframes delay{Ten          One100%{ A-webkit-transform:translate (100px,0); -         } -         the     } - . delay{ -  - width:100px;height:100px; +Background-color: #000; --webkit-animation:delay 1s linear 2forwards alternate; +     } A</style> at -<body> -<div class= "Delay" ></div> -</body> -
    1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title>delay</title>6<meta name= "viewport" content= "width=device-width, initial-scale=1"/>7 8<style type= "Text/css" >9@-webkit-keyframes delay{Ten          One100%{ A-webkit-transform:translate (100px,0); -         } -         the     } - . delay{ -  - width:100px;height:100px; +Background-color: #000; --webkit-animation:delay 1s linear 2both alternate; +     } A</style> at -<body> -<div class= "Delay" ></div> -</body> -
    Two pieces of code mainly show that in the case of forwards and both, the effect is still the same when the animation is set to run the inverse number of times. Because what I've seen online is that forwards in the reverse of the number of times will stop at 100% of the keyframe, not 0%.
  10. Iteration-count
    Number of runs.
    This would have been nothing to say, at a glance, but inadvertently found that there are the following special circumstances:
    cannot be a negative number
    Can be 0     for 0 when the count is
    It can be fractional     , not rounded. But how much to run, like. 5 runs to the 50% location.

  11. Events

    In the world of animation, there is always the need, that is, an animation after the end of the next animation, this time you need to know when the last animation is over. Although the settimeout can be used to achieve similar results, but the total feeling is not accurate.
    Fortunately, CSS3 's animation has JS event.
    Start: Animationstart
    Iteration: Animationiteration
    Ends: Animationend
    1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title>delay</title>6<meta name= "viewport" content= "width=device-width, initial-scale=1"/>7 8<style type= "Text/css" >9@-webkit-keyframes delay{Ten          One100%{ A-webkit-transform:translate (100px,0); -         } -         the     } - . delay{ -  - width:100px;height:100px; +Background-color: #000; --webkit-animation:delay 1s linear 2both alternate; +     } A</style> at -<body> -<div class= "Delay" ></div> -<script type= "Text/javascript" > -Window.onload =function(){ -         varDelay = document.getelementsbyclassname (' delay ') [0], in time1, - time2; toDelay.addeventlistener (' Webkitanimationstart ',function(){ +Time1 =NewDate (). GetTime (); -Time2 =time1; theConsole.log (time2-time1+ ' MS ') *              $         })Panax NotoginsengDelay.addeventlistener (' Webkitanimationiteration ',function(){ -Time2 =NewDate (). GetTime (); theConsole.log (time2-time1+ ' MS ') +         }) ADelay.addeventlistener (' Webkitanimationend ',function(){ theTime2 =NewDate (). GetTime (); +Console.log (time2-time1+ ' MS ') -         }) $     } $</script> -</body> -
    As you can see from the code, iteration is triggered when the animation repeats itself.


Animation CSS3 Animation Summary

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
css3 animation effects demo css3 text animation effects examples keyframe animation mng animation omnigraffle animation stylus animation apng animation

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More