CSS Animations

Posted on by tchastkavich

Shape of the Day:

Website of the Day:

https://connectivewebdesign.com/pricing – check out how much it costs to build a website!

How to use Animate.CSS

  • The website has simple to use and ready-made animations for you to add to any website (very little code required).
  • First go to Animate.CSS and check out how each of the animations work. The name in the drop down will be used in your code.
  • Next you need to add a link to the external style sheet in the head section. 
    • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  • Next, add classes to the elements you would like to be animated. Each class must begin with the word “animated” and end with the class name. For example – p class=”animated bounce” or p class=”animated infinite bounce” if you want the animation to happen continuously.
  • Open Visual Studio and start a new webpage with this code.
  • Change the animated classes for the text and picture using the Animate.CSS as a reference/animation checker.
  • Infinite is an option and does not need to be used all the time. What happens when you remove infinite? How often and when does the animation happen? What’s a way for it to happen again?
  • Take a look at Animate.CSS code and see if there are any CSS properties.

CSS Animation Coding

  • A CSS animation is when you change an element style over a set period of time.
  • Basics: the @keyframes rule and the animate property are used together to create animations with CSS.
  • @keyframes is the CSS rule that creates animations. @keyframes are points on a timeline. The points can be defined inside @keyframes to give them each different style declarations. @keyframes is linked to a CSS selector for the animation to work properly.
  • The animation property is used to call @keyframes in a CSS selector. Animations can have more than one property (name, duration, iteration-count, etc.)
  • Look again at the code behind Animate.CSS and check how the @keyframes are used with the animation property. What is the animation name? What is the selector it’s being used with? What CSS style changes are happening in this animation?
  • @keyframes controls the CSS style changes while the animation property is controlling how long the animation will take place, speed, etc.

CSS Animations Practice

  • Play with the yellow box in the code that has been given. Let’s try to change the colour with an animation. First copy and paste your @keyframes code and then you can change opacity to background-color. Change the background-color from yellow to another colour.
  • There are two ways now to animate the yellow box. @keyframes has to be linked to a selector and the animation property will call the @keyframes inside the selector. You can either create a new class with the animation properties you want to use and apply it to the box. You can also add the animation properties to the .box class – try both ways below!
    • Create a second animation class – copy and paste the first one. Name this one .animation2 and change the animation name to color change. Also add the duration to 5s, the iteration count to 3 and add the .animation2 class to the div tags in the body section.
    • Copy/paste the animation properties that you just added to your .animation2 class into the .box class. Get rid of the .animation2 class that you applied to the div tags.
  • Infinite animation can be done on the box to make it change colour constantly. Give animation-iteration-count the value of infinite.
  • @keyframes points:
    • 0% is beginning (from) of the animation and 100% is the end (to). Use values in between like 25%, 50%, 75% to utilize different points of the animation.
    • Make the yellow box change more colours – change colorchange @keyframes with from 0% and to 100%. Then add 25% and 50% and change the background-colors to pink and orange.
  • Animation Speed – use the animation-timing-function property in order to set the speed of the animation. Use the value of linear (same speed from start to end). Other values are ease (default), ease-in, ease-out, ease-in-out, and cubic-bezier (n, n, n, n) – this means you define your own values.
  • Animation end – Use the animation-fill-mode property to specify how the animation should look after the keyframes have been finished. The default is for the element to return to what it looked like pre-animation. It can take the following values: forwards (element will retain style(s) of last keyframe), backwards (element will retain style(s) of first keyframe), or both.
    • It is affected by animation-iteration-count. Change the value to 1 so the animation plays once then add animation-fill-mode: forwards; (what colour will the box be?)
  • Multiple animations – Add different width values to each of the @keyframes points (400px, 350px, 300px, 250px)
  • Add a margin-left: 0px; margin-left: 50px; margin-left: 100px; and margin-left: 150px