Shape of the Day:

• Animation Challenge

Website of the Day:

https://countdown.onlineclock.net/countdowns/christmas/ – We’re nearly there!

 1. Animation Challenge

• You are going to practice everything we’ve learned about animations over the past few classes. You will use Animate.css, @keyframes rule and the animation property, and Animista.net.

1. Download this code and copy/paste into a new Brackets page. Save as animationchallenge.html.
2. Animate.css
   • The Animate.css style sheet has been added to the code above (see line 8 in your code) so all you have to do is add classes to animate your elements
   • Choose any animated class you want to apply to your h1. Go here for the list of choices. **Each class begins with the word animated and ends with the class name.** Example: p class=”animated bounce”
   • Your h1 will only be animated once when the page loads. Make your h2 have an infinite animation by choosing a new animation class in the same way as the previous step but add infinite in the middle.Example: p class=”animated infinite bounce”
3. @keyframes rule and animation property
   • Make the square change background-color from pink to purple by adding the background-color property in the to keyframe
   • Try to animate the box by moving it horizontally with the following steps
   • Add the correct animation-name for the .box class and make the animation-duration 5 seconds
   • Make the box move horizontally 100px by using the transform property (see code example here). Add the transform property in the to keyframe for from and to
   • Make the animation for the square (.box) happen two times
   • Make the animation for the square (.box) the same speed from beginning to end and find the right animation property to do that here (look for “Specify the Speed Curve of the Animation”)
   • Make the square end up purple and moved over 100px when the animation is over- find the right animation property to do that here (check under “Specify the fill-mode For an Animation”)
   • Add the correct animation-name to the .circle class
   • Make the animation-duration for .circle 5 seconds, the animation-iteration-count infinite, and the animation-timing-function linear
   • Add the correct @keyframes stages for spin by filling in the ????
   • For the 25% @keyframes stage have the circle rotate 45 degrees by filling in the correct value for the transform property (see here for example)
   • Make the 75% @keyframes stage the same as 25%
4. Animista.net
   • You are going to use Animista.net to animate your image
   • Go to Animista.net and pick an animation you like
   • Modify the animation by using the left menu if you want to change things like animation duration, speed, etc.
   • When you have the animation the way you want, click on the curly brackets on the right just above the animation example to get the code. You will see animation property and @keyframes code. Click Autoprefixer to get rid of the unnecessary code.
   • Copy and paste the animation property and its values to the img selector in your CSS
   • Copy and paste the new @keyframes rule for the animation with the code below your image selector
5. Your turn
   • Create a new animation any way you want by using either Animate.css, the @keyframes rule and the animation property, or Animista.net. Apply the animation to new content to animate (text or an image – identify what is your own animation creation).