Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
cssAnimationShowcase/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
339 lines (300 sloc)
25.6 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CSS Animations</title> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900' rel='stylesheet' type='text/css'> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'> | |
| <link href="css/main.css" rel="stylesheet" /> | |
| <link rel="stylesheet" href="css/triangle.css"> | |
| <link href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" /> | |
| <script> | |
| /* | |
| Determining the point on the Y Axis at which the scrolling has to start (starting coordinate) | |
| is the first thing we need to do. The point we want is the visible top of page coordinate, | |
| which takes into account any scrolling the user has done. We can then use this number, | |
| accompanied with the destination coordinate covered below to determine the distance between | |
| the starting and stopping points. This difference is then used to determine the scroll speed | |
| and perform the actual scrolling, whether scrolling up or down. | |
| */ | |
| function currentYPosition() { | |
| if (self.pageYOffset) { | |
| // Firefox, Chrome, Opera, Safari | |
| return self.pageYOffset; | |
| } else if (document.body.scrollTop) { | |
| // Internet Explorer 6, 7 and 8 | |
| return document.body.scrollTop; | |
| } else { | |
| // Others | |
| return 0; | |
| } | |
| } | |
| /* | |
| Once we have the starting coordinate, we need to determine the destination coordinate. | |
| We can do this by assigning an ID to the destination element, whether it be a <div> tag, <span>, | |
| <img> or whatever. The following function expects the destination element's ID as its only parameter. | |
| So how does this function work, exactly? Well, say the destination element is half way down the page. | |
| What this function does is loop through the offsetParent, adding the offsetTop values to the y | |
| variable until it arrives at the top of the page. This will compute the element's true Y position. | |
| */ | |
| function elmYPosition(eID) { | |
| var elm = document.getElementById(eID); | |
| var y = elm.offsetTop; | |
| var node = elm; | |
| while (node.offsetParent && node.offsetParent != document.body) { | |
| node = node.offsetParent; | |
| y += node.offsetTop; | |
| } return y / 9; | |
| } | |
| /* | |
| Now that we're able to obtain the start and stop Y coordinates, we're ready to perform the actual scroll | |
| operation. | |
| */ | |
| function smoothScroll(eID) { | |
| // Fetch the start and stop Y coordinates via the functions covered above | |
| var startY = currentYPosition(); | |
| var stopY = elmYPosition(eID); | |
| // Compare the two values to determine the distance between them. | |
| // When setting the distance variable, an alternate control structure is used to determine | |
| // which point should be subtracted from the other (depends on whether it needs to scroll up or down). | |
| // If stopY > startY, return stopY - startY, otherwise return startY - stopY | |
| var distance = (stopY > startY) ? stopY - startY : startY - stopY; | |
| // Check to see whether the destination element is less than 100 pixels away. | |
| if (distance < 100) { | |
| // If so, simply jump to it. | |
| scrollTo(0, stopY); | |
| return; // Exit function at this point | |
| } | |
| // The destination point is more than 100 pixels away... | |
| // Dynamically set the scroll speed (distance divided by 100) without letting it exceed 20 | |
| var speed = Math.round(distance / 45); | |
| if (speed >= 20) speed = 20; | |
| // Determine the step size (distance to jump each time the visible top of page Y coordinate is changed, | |
| // thus moving closer to the destination) | |
| var step = Math.round(distance / 200); | |
| // Determine the leapY (next coordinate to jump to) and set the initial timer value to 0 | |
| var leapY = stopY > startY ? startY + step : startY - step; | |
| var timer = 0; | |
| // Determine whether the destination point is greater than the starting point (scrolling down). | |
| if (stopY > startY) { | |
| // The downward scroll is performed | |
| /* | |
| Here is how the for loop works (scroll up). The loop starts out with i = the start Y coordinate and | |
| loops until it hits the stopY coordinate, incrementing i by the step size per iteration. Inside the loop | |
| there is a setTimeout which runs window.scrollTo with the next Y coordinate as its value (leapY). | |
| The actual timeout delay value is determined by multiplying the timer value by the speed. So, the timeout | |
| value for the first iteration would be 0 * speed, the second iteration would use 1 * speed and so on. | |
| */ | |
| for (var i = startY; i < stopY; i += step) { | |
| // setTimeout will run the code in the first parameter after a millisecond delay specified by | |
| // the second parameter | |
| setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed); | |
| // The leapY value is incremented the step size (the next Y coordinate to jump to). | |
| // A check is also performed to ensure the leapY value doesn't exceed the destination coordinate. | |
| leapY += step; if (leapY > stopY) leapY = stopY; timer++; | |
| } | |
| return; // Exit the function at this point | |
| } | |
| // Perform an upward scroll | |
| // The scroll up for loop works the exact opposite of the scroll down loop we just covered | |
| for (var i = startY; i > stopY; i -= step) { | |
| setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed); | |
| leapY -= step; if (leapY < stopY) leapY = stopY; timer++; | |
| } | |
| } | |
| // This is where you set what you want to scroll to and how long you want to wait before | |
| // the scroll begins | |
| window.addEventListener("load", function () { | |
| // Once the page is loaded, wait 3 seconds and then scroll to the personalInfo | |
| // element. | |
| setTimeout("smoothScroll('learn')", 12000); | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="triangle" id="triangle"> | |
| <section class="container one"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container two"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container three"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container four"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container five"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container six"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container seven"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container eight"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container nine"> | |
| <div id="cube"> | |
| <figure class="front"></figure> | |
| <figure class="back"></figure> | |
| <figure class="right"></figure> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| <figure class="bottom"></figure> | |
| </div> | |
| </section> | |
| <section class="container ten"> | |
| <div id="cube"> | |
| <figure class="left"></figure> | |
| <figure class="top"></figure> | |
| </div> | |
| </section> | |
| </div> | |
| <content class="info"> | |
| <section class="intro"> | |
| <div id="learn"> | |
| <h1> Using CSS Animations</h1> | |
| <p> | |
| With CSS3, we can make motion graphics and animations on par with what you see in videos, | |
| and even some 3D applications. With 2D and 3D capabilities, and the ability to specify | |
| keyframes for almost any CSS attribute, | |
| <span>the possibilities are endless.</span> | |
| </p> | |
| </div> | |
| <div class="jargon"> | |
| <div class="keyframes"> | |
| <h2>Some Introductory Stuff</h2> | |
| <p class="subhead">In order to understand CSS animations, you've got to know a few things about traditional animation.</p> | |
| <h3>Keyframes</h3> | |
| <p> | |
| Animations are visual changes that take place over time. To mark those changes, we use keyframes. | |
| They're snapshots of properties' values at specified points in time. After creating two (or more) keyframes | |
| that create a change in a value over time, the change is interpolated in real time from start to finish, | |
| hitting any keyframes you have along the way. | |
| </p> | |
| <div class="example-code"> | |
| <pre class="css" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #a1a100;">@keyframes animation-name {</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #933;">0%</span> <span style="color: #00AA00;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">red</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #00AA00;">}</span></div></li><li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #933;">100%</span> <span style="color: #00AA00;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #993333; font-weight: normal;">blue</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #00AA00;">}</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">}</span></div></li></ol></pre> | |
| </div> | |
| <p> | |
| An animation with these keyframes would change a text's color from red to blue. Keyframes are placed | |
| by specifying percentages. If you are only concerned about start and finish (<code>0%</code> to <code>100%</code>), you can | |
| use <code>from</code> and <code>to</code>. | |
| </p> | |
| </div> | |
| <div class="eases"> | |
| <h3>Eased vs Linear Motion</h3> | |
| <p> | |
| In the real world, most things don't move with a constant speed. They accelerate, move, decelerate, and stop. | |
| The former is called linear motion, and the latter is called easing. Animations that ease into and out of | |
| motion automatically look wonderful. It's the secret sauce of animation. You can control an object's motion type | |
| with the attributes <code>linear</code>, <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, and <code>ease-in-out</code>. | |
| We'll get to those in a second. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="howto"> | |
| <h2>Creating Animations</h2> | |
| <p> | |
| Now that the jargon is out of the way, we can get to the code. In order to apply a CSS animation to an HTML | |
| element, you have to assign the element the animation as a CSS property, and specify the animation through | |
| the <code>@keyframes</code> rule, like we saw earlier. <br> | |
| There are a several CSS properties that are used to construct animations: | |
| </p> | |
| <div> | |
| <ul class="properties"> | |
| <li><code>animation-name</code> — specfies the name of the animation to be applied to the element. Multiple may be configured at once with commas.</li> | |
| <li><code>animation-duration</code> — specifies the length of the animation per cycle, in seconds (ex <code>1s</code>).</li> | |
| <li><code>animation-timing-function</code> — specifies the type of timing the animation will use to transition. Use <code>linear</code>, <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, and <code>ease-in-out</code> to declare the type you want.</li> | |
| <li><code>animation-delay</code> — instructs how long the browser should wait after load before executing the animation. Declare the time in seconds (ex <code>1s</code>). The default value for this property is <code>0s</code>.</li> | |
| <li><code>animation-iteration-count</code> — can be used to loop animations. It's default value is <code>1</code>, but you can put in any integer, or <code>infinite</code> for indefinite looping.</li> | |
| <li><code>animation-direction</code> — sets the direction of the animation. <code>Normal</code>, the default value, changes nothing. <code>Reverse</code> plays the animation backwards. <code>Alternate</code> plays every odd cyle in reverse. <code>Alternate-reverse</code> carries out <code>alternate</code> in reverse.</li> | |
| <li><code>animation-fill-mode</code> — determines how an animaton will interact with the static styles of the element. <code>None</code>, the default value, changes nothing. <code>Forwards</code> forces the element to retain the styles from the last keyframe of the animation, even if they do not match those from before the animation. <code>Backwards</code> will apply the styles from the first keyframe of the animation to the element as soon as the animation is defined, even before it is executed. <code>Both</code> does both.</li> | |
| <li><code>animation</code> — is the shorthand property for all the above properties. Using this property, you may enter the desired value for any animation property (in the order listed here). Any unset/skipped properties will retain their default value.</li> | |
| </ul> | |
| </div> | |
| <h3> | |
| Example | |
| </h3> | |
| <p> | |
| Here's an example of a floating square, whose <code>width</code>, <code>height</code>, and <code>box-shadow</code> properties are animated to give a suspended effect. | |
| </p> | |
| <div class="example"> | |
| <div> | |
| <div class="example-code"> | |
| <div> | |
| <pre class="html4strict" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"example-animation"</span>></span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;"><figure <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"floater"</span>><<span style="color: #66cc66;">/</span>figure></span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span></div></li></ol></pre> | |
| </div> | |
| </div> | |
| <div class="example-code"> | |
| <pre class="css" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #cc00cc;">#floater</span> <span style="color: #00AA00;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#e6274b</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="font-weight: bold;">box-shadow</span><span style="color: #00AA00;">:</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.6<span style="color: #00AA00;">)</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">border-radius</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="font-weight: bold;">animation</span><span style="color: #00AA00;">:</span> float 1.75s ease-in-out infinite<span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">}</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #a1a100;">@keyframes float {</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #933;">50%</span> <span style="color: #00AA00;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="font-weight: bold;">box-shadow</span><span style="color: #00AA00;">:</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.5<span style="color: #00AA00;">)</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">25px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">160px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">160px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #00AA00;">}</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #933;">100%</span> <span style="color: #00AA00;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="font-weight: bold;">box-shadow</span><span style="color: #00AA00;">:</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span>.6<span style="color: #00AA00;">)</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">150px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #00AA00;">}</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">}</span></div></li></ol></pre> | |
| </div> | |
| </div> | |
| <div class="example-animation"> | |
| <figure id="floater"></figure> | |
| </div> | |
| </div> | |
| </section> | |
| </content> | |
| </body> | |
| </html> |