Understanding CSS Animations<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><a href='
http://www.imore.com/understanding-css-animations' title="Understanding CSS Animations"><img src='
http://www.imore.com/sites/imore.com/files/styles/large_wm_blw/public/field/image/2014/10/css_animations_hero.jpg?itok=8tP6Tlrp' />[/url]</p> <p>
The following is excerpted from CSS Animation: An Interactive Guide by Vicki Murley.</p> <p>Like CSS Transitions, CSS Animations also enable changes in CSS property values to occur smoothly over a period of time. With either technology, you could create an animation that fades opacity on an element from 1.0 to 0... but with CSS Animations, you can create an animation where the opacity changes from 1.0 to 0.2, then pulses between 0.2 and 0.5 a few times, then finally fades to 0. CSS Animations give you fine-grained control over the individual keyframes of an animation, whereas with CSS Transitions, all keyframe rendering between two CSS property values is automatically handled by the browser. You can use CSS Animations to create animations that:</p> <ul><li>bounce</li> <li>pop</li> <li>drift</li> </ul><p>and of course, much more.</p> <p><a href='
http://www.imore.com/understanding-css-animations' title="Understanding CSS Animations"><img src='
http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/11/understanding_css_animations_05.jpeg?itok=3VkBhwoN' />[/url]</p> <p>Code-wise, there are three components needed to define and execute a CSS animation:</p> <ol><li>A name and definition for the behavior of the animation, written with the CSS at-rule @keyframes.</li> <li>General parameters for the animation (such as its duration), set by various CSS properties.</li> <li>Triggering the animation to begin by setting the CSS property animation-name.</li> </ol><p>Let's create a "pop" animation to get an idea of how each of these three components translates to code. This example will briefly go over the basics; more details will be covered in the next sections, Defining Animations and Running Animations.</p> <p>The first step is to use the @keyframes at-rule to define the behavior of our animation, and to give it a name. We want to create an animation where a box "pops" onto the screen. The box is initially invisible with a scale factor of 0, then it grows to a size that is slightly larger than its original size. Next it scales down to dimensions slightly less than the original size, then back up to original size. The first step — where the element goes from invisible to slightly larger than original size — should take up most of the time in the animation, and the last few steps should take relatively less time.</p> <p>The @keyframes rule lets you break the animation into keyframes. Here's how to define this animation using the @keyframes rule, while naming the animation pop . We'll eventually apply this animation to a a <div> with id="box":</p> <p><a href='
http://www.imore.com/understanding-css-animations' title="Understanding CSS Animations"><img src='
http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/11/understanding_css_animations_03.jpeg?itok=Qdn5mQQc' />[/url]</p> <p>Each set of keyframes are assigned a percentage value, to correlate CSS property changes over a portion of the total animation timeline. For example, if the duration of the pop animation were 10 seconds, the box would be scaling from 0 to 1.1 for 8 seconds.</p> <p>Next, set general parameters for the animation — such as how long it will take — using animation- properties on the element being animated:</p> <p><a href='
http://www.imore.com/understanding-css-animations' title="Understanding CSS Animations"><img src='
http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/11/understanding_css_animations_02.jpeg?itok=alKR118p' />[/url]</p> <p>And finally, trigger the animation to begin by setting animation-name to the name of the animation you just created. Below, animation-name is set on #box in the static CSS of the page. As a result, animation-name will be applied and rendered just like any other CSS property — when the page is loaded. This means that as soon as the page loads, the box will "pop" into view:</p> <p><a href='
http://www.imore.com/understanding-css-animations' title="Understanding CSS Animations"><img src='
http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/11/understanding_css_animations_01.jpeg?itok=8PC2Eaza' />[/url]</p> <p>This short code sample introduces the @keyframes rule, plus three CSS properties for defining CSS Animations: animation-duration, animation-timing-function and animation-name. In the next sections you'll learn more details about these properties, plus new ways to define your animations with the @keyframes rule. You'll also learn about additional properties that let you:</p> <ul><li>iterate an animation several times, or infinitely</li> <li>delay the start of an animation</li> <li>play an animation in reverse</li> <li>pause and resume an animation</li> </ul><p>As you can already see, CSS Animations are flexible enough for simple animations, yet powerful enough for more complex ones. Let's move on to the next sections to learn more.</p> <p>
For more, get your copy of CSS Animation: An Interactive Guide by Vicki Murley on iPad or Mac today!</p> <ul><li>$7.99 - <a href="
https://itunes.apple.com/ca/book/css-animation-interactive/id799975886?mt=11&at=10l3Vy&ct=d_im" title="" rel="nofollow">Download now[/url]</li> </ul></div></div></div><div id="comment-wrapper-nid-28290"></div><img width='1' height='1' src='
http://tipb.com.feedsportal.com/c/33998/f/616881/s/4060b085/sc/4/mf.gif' border='0'/><br clear='all'/>
<a href="
http://da.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/rc/1/rc.htm" rel="nofollow"><img src="
http://da.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/rc/1/rc.img" border="0"/>[/url]
<a href="
http://da.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/rc/2/rc.htm" rel="nofollow"><img src="
http://da.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/rc/2/rc.img" border="0"/>[/url]
<a href="
http://da.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/rc/3/rc.htm" rel="nofollow"><img src="
http://da.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/rc/3/rc.img" border="0"/>[/url]
<img src="[url]http://da.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/a2.img" border="0"/>[/url]<img width="1" height="1" src="
http://pi.feedsportal.com/r/211597464979/u/49/f/616881/c/33998/s/4060b085/sc/4/a2t.img" border="0"/><img src="
http://feeds.feedburner.com/~r/TheIphoneBlog/~4/ZcsdxKO_zFY" height="1" width="1"/>
Source:
Understanding CSS Animations
