How to start several CSS transitions at once

How to start several CSS transitions at once

<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"><a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large_wm_brw/public/field/image/2014/10/css_animations_hero.jpg?itok=iIIHeCl3' />[/url] The following is excerpted from CSS Animation: An Interactive Guide by Vicki Murley. You've seen several examples throughout this book where a single CSS property is animated. But to create more advanced effects, you may want to animate more than one property at a time. The previous section showed multiple ways to define transitions for multiple CSS properties, on the same element. For example: <a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/PastedGraphic-5.jpeg?itok=NaTcoo_P' />[/url] Or, if you prefer to use the long form properties: <a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/PastedGraphic-6.jpeg?itok=m8hEEY-b' />[/url] To trigger the transitions on opacity and transform to begin, you might write JavaScript that changes the values of these two properties individually, like so: <a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/PastedGraphic-12.jpeg?itok=wXCyl2vq' />[/url] This works, but there's a better approach when you need to trigger transitions on more than one property, on the same element. First, encapsulate the CSS properties that are transitioning in a CSS class. Then, when you want to trigger the transition, add or remove that class from the element using classList. classList is a DOM Element property which returns a token list of the class attribute on an element. Additionally, classList has four methods which simplify the process of adding, removing, toggling, and testing for the existence of a class on an element: <ul><li>element.classList.add('className')
Add this class to an element, if the element doesn't already have it.</li> <li>element.classList.remove('className')
Remove this class from the element. </li> <li>element.classList.toggle('className')
If the element has the class remove it, otherwise add it. </li> <li>element.classList.contains('className')
Returns true or false depending on whether the element's class list contains the class.</li> </ul>Let's walk through an example of using classList to trigger CSS transitions on several properties at once. In this example, the text HELLO WORLD rises upward from a position just below the middle of the page, while transitioning from transparent to opaque. Try it out on CodePen before moving on to the code. The HTML element is simply some text inside a <div>, with two CSS classes applied: <a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/PastedGraphic-8.jpeg?itok=S0WKNP7t' />[/url] The hello class styles and centers the text, and defines transitions for the transform and opacity properties. The hidden class makes the Hello World <div> transparent, and moves it downward: <a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/PastedGraphic-9.jpeg?itok=hDwf0H_3' />[/url] With a line or two of JavaScript, you can trigger the transition to begin by removing the hidden class from the element. In this case, the transition is triggered when the page loads: <a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/PastedGraphic-10.jpeg?itok=GVoM8KSL' />[/url] That's really all there is to it. It's just as easy to create a transition animation that moves the text on and off the screen — just use toggleClass instead of removeClass. When the hidden class is removed HELLO WORLD moves upward and becomes visible, and when hidden is added it moves downward and becomes transparent: <a href='http://www.imore.com/how-start-several-css-transitions-once' title="How to start several CSS transitions at once"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/PastedGraphic-11.jpeg?itok=Z5UsDLqm' />[/url] This example on CodePen shows the above code in action. You can tap or click anywhere on the main background image to toggle the hidden class. Try tapping or clicking when HELLO WORLD is in mid-transition, and notice how the text immediately switches direction. Note that the CSS for the hello element hasn't changed — defining a transitions for transform and opacity on this element causes these properties to be animated whenever they change in any way. You'll learn more about defining different behavior for the "forward" and "reverse" directions of a transition later in this section. For more, get your copy of CSS Animation: An Interactive Guide by Vicki Murley on iPad or Mac today! <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-27921"></div><img width='1' height='1' src='http://tipb.com.feedsportal.com/c/33998/f/616881/s/40257cd5/sc/4/mf.gif' border='0'/> 

<a href="http://da.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/rc/1/rc.htm" rel="nofollow"><img src="http://da.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/rc/1/rc.img" border="0"/>[/url]
<a href="http://da.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/rc/2/rc.htm" rel="nofollow"><img src="http://da.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/rc/2/rc.img" border="0"/>[/url]
<a href="http://da.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/rc/3/rc.htm" rel="nofollow"><img src="http://da.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/rc/3/rc.img" border="0"/>[/url]

<img src="[url]http://da.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/a2.img" border="0"/>[/url]<img width="1" height="1" src="http://pi.feedsportal.com/r/211597193103/u/49/f/616881/c/33998/s/40257cd5/sc/4/a2t.img" border="0"/><img src="http://feeds.feedburner.com/~r/TheIphoneBlog/~4/zeV3bB4PBOY" height="1" width="1"/>

Source: How to start several CSS transitions at once