[CSS] @keyframes
@keyframes swing{ 0% { transform: rotate(0deg)} 100% {transform: rotate(-30deg)} } #sweetlandia{ animation: swing 2s infinite ease-in-out; }
Muli-steps keyframes
@keyframes swing { 0% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } 100% { transform: rotate(-30deg); } } #sweetlandia { animation: swing 2s infinite ease-in-out; }
@keyframes swing { 0%, 100% { transform: rotate(-30deg); } 20% {transform: scale(0.95)} 80% {transform: scale(0.95)} 50% { transform: rotate(30deg); } } #sweetlandia { animation: swing 2s infinite ease-in-out; }
More Advanced Keyframe Animations
A fadeIn keyframe animation has been started. Style the element to be completely hidden in its starting state. Hide it in a way that will allow us to fade it in.
@keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { } }
Complete the animation by making the end state visible.
@keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
Apply the fadeIn animation to the .modal-overlay when it is .active.
@keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } .modal-overlay.active{ animation: fadeIn .25s; }
Finally, in order to make the overlay stay visible after it is done animating, give the animation a fill-mode of forwards.
@keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } .modal-overlay.active{ animation: fadeIn .25s forwards; }
Create a slideUp keyframe animation.
Have the slideUp animation start by moving down (translating Y) by 400px.
End the animation by moving up (translating Y) by -300px up the page.
@keyframes slideUp{ from { transform: translateY(400px); } to{ transform: translateY(-300px); } }
The fadeIn animation has already been applied for you to the modal when active. Now apply the newly created slideUp animation. Give the animation a0.65s duration with a 0.5s delay.
.modal.active { animation: fadeIn 0.25s forwards, slideUp 0.65s 0.5s; }
Give the slideUp animation a custom cubic bezier with these values 0.175, 0.885, 0.32, 1.275. This will cause the modal to slideUp, overshoot the -300px, and then slide back down to its resting spot at -300px. Neat, right?!
Finally, have the modal stay at its final resting state on the page, by giving theslideUp animation a fill-mode of forwards.
@keyframes slideUp{ from { transform: translateY(400px); } to{ transform: translateY(-300px); } } .modal.active { animation: fadeIn 0.25s forwards, slideUp 0.65s 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
<!DOCTYPE>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Cosplay Happenings</title>
<link href='level3.css' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Nav -->
<nav class='nav'>
<div class='cell'>
<a class='nav-logo' href='/'>
<div class='shing'>
<img src='logo.png' alt='Sweet Lands' />
</div>
</a>
<ul class='nav-menu'>
<li><a href='#retweets'>Retweets</a></li>
<li><a href='#pictures'>Pictures</a></li>
<li><a href='#event'>Upcoming</a></li>
</ul>
</div>
</nav>
<!-- Header -->
<header class='header'>
<div class='cell well'>
<h1 class='header-title'>Cosplay Happenings</h1>
<p class='header-subtitle'>Welcome to our candy-coated community!</p>
</div>
</header>
<!-- Most Retweeted -->
<section class='retweets' id='retweets'>
<div class='cell well'>
<h2>Most Retweeted</h2>
<div class='retweet group'>
<img src='unicorn.jpg' alt='Unicorn' width='200' height='200' />
<p>
Sparkles the Unicorn saunters down the Lemony Brick Road and
prances past the Soda Pop River! Her majestic horn points the way
to the Frosting Fortress, as her glittery mane and tail sway in the
bubblegum breeze.
</p>
</div>
<div class='retweet group'>
<img src='fairy.jpg' alt='Fairy' width='200' height='200' />
<p>
Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla
the Sherbet Sprite! He’s thoughtfully pondering which treat to
partake of next. The Lollipop Forest is in the distance, in case he
needs a place to rest his sweet head.
</p>
</div>
</div>
</section>
<!-- Purchase -->
<section class='pictures' id='pictures'>
<div class='cell well'>
<h2>Pictures</h2>
<ul class='pictures-list group'>
<li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li>
<li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li>
<li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li>
<li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li>
<li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li>
<li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li>
<li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li>
<li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li>
</ul>
</div>
</section>
<!-- Contact -->
<section class='event' id='event'>
<div class='cell well'>
<h2>Upcoming Event</h2>
<div class='event-content'>
<img src='sweetlandia.png' alt='SweetLandia' id='sweetlandia' width='200' />
<h3>SweetLandia</h3>
<p>
Once upon a time, there was a magical place called Sweet Lands — a
world we may now only travel to in our imaginations. But one
weekend every year, when the sugar cane stalks bend toward the east
and the cotton candy is at its swirliest, the Sweetlandia
convention brings this wondrous world within reach! So join
Sparkles, Pierre, and the rest of the gang for a meeting of the
sweet-minded in sunny Omaha, Nebraska! It’s sure to be your
sweetest adventure yet.
</p>
<div class='event-action'>
<a href='#' class='btn buy-button'>
<span class='top content'>Register Now!</span>
<span class='bottom content'>Hurry, Limited Space!</span>
</a>
</div>
</div>
</div>
</section>
<!-- Register Modal -->
<div class='modal-overlay'></div>
<div class='modal'>
<div class='modal-header'>
<a class='modal-close' href='#' aria-label='Close'>×</a>
<h3>Register</h3>
</div>
<div class='modal-content'>
<form class='form' action=''>
<fieldset class='form-field'>
<!-- <label class='form-label' for='type'>CC Type</label> -->
<select class='cs-select cs-skin-elastic' name='type'>
<option value='visa'>Visa</option>
<option value='mastercard'>MasterCard</option>
<option value='american_express'>American Express</option>
</select>
</fieldset>
<fieldset class='form-field'>
<input class='form-input' type='text' id='number' />
<label class='form-label' for='number'>CC Number</label>
</fieldset>
<fieldset class='form-field'>
<input class='form-input' type='text' id='expiration' />
<label class='form-label' for='expiration'>CC Expiration</label>
</fieldset>
<div class='form-submit'>
<input class='btn' type='Submit' value='Submit' />
</div>
</form>
</div>
</div>
<script src='application.min.js'></script>
</body>
</html>
Apply the slideUpSmall animation to the modal's header using a 0.25second duration.
Give the slideUpSmall animation a 0.75 second delay and a fill-mode offorwards.
Nice job! Now apply the slideUpSmall animation to the modal's content using the same duration as before.
Give the slideUpSmall animation for the modal's content a 0.8 second delay and a fill-mode of forwards.
@keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } .modal-overlay.active { animation: fadeIn 0.25s forwards ; } @keyframes slideUp { from {transform: translateY(400px);} to {transform: translateY(-300px);} } .modal { transform: translateY(700px); } .modal.active { animation: fadeIn 0.25s forwards, slideUp 0.65s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes slideUpSmall { from {transform: translateY(80px);} to {transform: translateY(0px);} } .modal.active .modal-header { animation: fadeIn 0.25s 0.8s forwards, slideUpSmall 0.25s 0.75s forwards; } .modal.active .modal-content { animation: fadeIn 0.25s 0.85s forwards, slideUpSmall 0.25s 0.8s forwards; }
<!DOCTYPE> <html lang='en'> <head> <meta charset='utf-8'> <title>Cosplay Happenings</title> <link href='level3.css' rel='stylesheet' type='text/css'> </head> <body> <!-- Nav --> <nav class='nav'> <div class='cell'> <a class='nav-logo' href='/'> <div class='shing'> <img src='logo.png' alt='Sweet Lands' /> </div> </a> <ul class='nav-menu'> <li><a href='#retweets'>Retweets</a></li> <li><a href='#pictures'>Pictures</a></li> <li><a href='#event'>Upcoming</a></li> </ul> </div> </nav> <!-- Header --> <header class='header'> <div class='cell well'> <h1 class='header-title'>Cosplay Happenings</h1> <p class='header-subtitle'>Welcome to our candy-coated community!</p> </div> </header> <!-- Most Retweeted --> <section class='retweets' id='retweets'> <div class='cell well'> <h2>Most Retweeted</h2> <div class='retweet group'> <img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /> <p> Sparkles the Unicorn saunters down the Lemony Brick Road and prances past the Soda Pop River! Her majestic horn points the way to the Frosting Fortress, as her glittery mane and tail sway in the bubblegum breeze. </p> </div> <div class='retweet group'> <img src='fairy.jpg' alt='Fairy' width='200' height='200' /> <p> Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla the Sherbet Sprite! He’s thoughtfully pondering which treat to partake of next. The Lollipop Forest is in the distance, in case he needs a place to rest his sweet head. </p> </div> </div> </section> <!-- Purchase --> <section class='pictures' id='pictures'> <div class='cell well'> <h2>Pictures</h2> <ul class='pictures-list group'> <li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li> <li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li> <li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li> <li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li> <li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li> <li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li> <li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li> <li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li> </ul> </div> </section> <!-- Contact --> <section class='event' id='event'> <div class='cell well'> <h2>Upcoming Event</h2> <div class='event-content'> <img src='sweetlandia.png' alt='SweetLandia' id='sweetlandia' width='200' /> <h3>SweetLandia</h3> <p> Once upon a time, there was a magical place called Sweet Lands — a world we may now only travel to in our imaginations. But one weekend every year, when the sugar cane stalks bend toward the east and the cotton candy is at its swirliest, the Sweetlandia convention brings this wondrous world within reach! So join Sparkles, Pierre, and the rest of the gang for a meeting of the sweet-minded in sunny Omaha, Nebraska! It’s sure to be your sweetest adventure yet. </p> <div class='event-action'> <a href='#' class='btn buy-button'> <span class='top content'>Register Now!</span> <span class='bottom content'>Hurry, Limited Space!</span> </a> </div> </div> </div> </section> <!-- Register Modal --> <div class='modal-overlay'></div> <div class='modal'> <div class='modal-header'> <a class='modal-close' href='#' aria-label='Close'>×</a> <h3>Register</h3> </div> <div class='modal-content'> <form class='form' action=''> <fieldset class='form-field'> <!-- <label class='form-label' for='type'>CC Type</label> --> <select class='cs-select cs-skin-elastic' name='type'> <option value='visa'>Visa</option> <option value='mastercard'>MasterCard</option> <option value='american_express'>American Express</option> </select> </fieldset> <fieldset class='form-field'> <input class='form-input' type='text' id='number' /> <label class='form-label' for='number'>CC Number</label> </fieldset> <fieldset class='form-field'> <input class='form-input' type='text' id='expiration' /> <label class='form-label' for='expiration'>CC Expiration</label> </fieldset> <div class='form-submit'> <input class='btn' type='Submit' value='Submit' /> </div> </form> </div> </div> <script src='application.min.js'></script> </body> </html>
