Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
227 lines (212 sloc) 8.39 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/css-showcase.css">
<link rel="stylesheet" href="https://use.typekit.net/taz4mnx.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class = "wrapper">
<div class = "neon-wrapper">
<span class = "txt">animation</span>
<span class ="gradient"></span>
<span class = "dodge"></span>
</div>
</div>
<header>
<h5>by Solange Wright</h5>
</header>
<section class = "navigation">
<div>
<p>Aside from creating static layouts and arrangements, CSS allows you to animate your designs so they can become interactive and fun. With CSS animations, you can change an element from one style or layout to another without any HTML or Javascript. Click the arrow to learn more about CSS animation.</p>
<nav>
<ul>
<li><a href = "#learn">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
</div>
</section>
<div id = "filler-container">
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
</div>
<section class = "how-to">
<div class = how-to-content>
<article class = "content">
<h4 id = "learn">How To</h4>
<p>
CSS requires you to define an animation and link it to the desired
element. To do this, you must use the <em>@keyframes</em> keyword
to define what you want the animation to do. Take a look to see what
the following code does.
</p>
</article>
<article class = "media">
<img src = "images/keyframe-screenshot.png">
</article>
</div>
<article class = "keyframe-animation">
<div class = "paddle">
<div class = "ball"></div>
</div>
</article>
</section>
<section class = "animation-explained">
<article>Animation requires several properties that describe how fast
the animation will be, how many times it will occur, the beginning and end states,
and its direction. The most commonly used properties are
<em>animation-duration</em>, <em>animation-iteration-count</em>. Click on one of the links below
to learn how each property affects the animation.
</article>
<article>
<div class = "animation-menu">
<span class = "link"><a href = "#duration">Duration</a></span>
<span class = "link"><a href = "#iteration-count">Iteration Count</a></span>
<span class = "link"><a href = "#animation-direction">Direction</a></span>
</div>
</article>
</section>
<div id = "filler-container">
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
</div>
<section id = "duration">
<article>
<p>The <em>animation-duration</em> property defines how long an animation should take to complete one cycle.</p>
</article>
<div class = "ball-animations">
<article>
<h5>Animated at 2 seconds:</h3>
<div id = "ball1"></div>
</article>
<article>
<h5>Animated at 4 seconds:</h3>
<div id = "ball2"></div>
</article>
</div>
<div class = "ball-animations">
<article>
<h5>Animated at 10 seconds:</h3>
<div id = "ball3"></div>
</article>
<article>
<h5>Animated at 1/2 a second:</h3>
<div id = "ball4"></div>
</article>
</div>
<article>
<div class = "iteration-link">
<span class = "link"><a href = "#iteration-count">Click to learn about the iteration-count</a></span>
</div>
</article>
</section>
<div id = "filler-container">
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
</div>
<section id = "iteration-count">
<article>
<p>The <em>animation-iteration-count</em> property specifies the number of times an animation should be played. With this animation, you can specify a number value, or infinite, where it can play forever.</p>
</article>
<article>
<img src="images/iteration-screenshot.png" alt="iteration-screenshot-1">
<img src="images/iteration-screenshot-2.png" alt="iteration-screenshot-2">
</article>
<article>
<div class = "iteration-link">
<span class = "link"><a href = "#animation-direction">Click to learn about animation-direction</a></span>
</div>
</article>
</section>
<div id = "filler-container">
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
<div class = "filler"></div>
</div>
<section id = "animation-direction">
<article><p>Finally, The <em> animation-direction</em> property defines whether an animation should be played forwards, backwards, or in alternate cycles.</p>
<p>Notice how Mario is going forwards, while Luigi is reversing backwards.</p>
</article>
<article>
<div class = "road">
<img class = "mario" img src = "images/mario.png">
<img class = "luigi" img src = "images/luigi.png">
</div>
</article>
</section>
</body>
</html>
You can’t perform that action at this time.