Creating animations using CSS

Creating animations using CSS

Abiola's photo
Abiola
·

5 min read

Animations make your website more lively to view and can be done with plain CSS without any library involved. Animations involves changing positions, movement and manipulating of HTML element; these can be done using CSS.

How CSS animations work:

  • Define the CSS animation rule (Keyframes)
  • Add it to the HTML element you want to animate.

To create a CSS animation sequence, you style the element you want to animate with the animation property and its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the keyframes rule.

The sub-properties of the animation property are:

1) animation-name : specifies the name of the keyframes rule describing the animation’s styles.

2) animation-duration : animation-duration property defines how long the time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).

3) animation-timing-function : The timing-function specifies the speed curve of the animation,it enables you to control and vary the acceleration of an animation that is it defines where the animation speeds up and slows down over the specified duration. The property can have the following values:

  • ease: specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear: specifies an animation with the same speed from start to end.
  • ease-in: specifies an animation with a slow start.
  • ease-out: specifies an animation with a slow end.
  • ease-in-out: specifies an animation with a slow start and end.
  • cubic-bezier(n,n,n,n) - Lets you define your own values for the speed using the cubic-bezier function

4) animation-delay: specifies the delay between the time the element is loaded and the beginning of the animation sequence. P.S : Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds.

5) animation-iteration-count: specifies the number of times the animation should repeat ; it can either be " infinite " or a specified number of count

6) animation-direction: specifies whether an animation should be played forwards, backwards or in alternate cycles. The animation-direction property can have the following values:

  • normal: The animation is played as normal (forwards). This is default.
  • reverse: The animation is played in reverse direction (backwards).
  • alternate: The animation is played forwards first, then backwards.
  • alternate-reverse: The animation is played backwards first, then forwards.

7) animation-fill-mode: specifies a style for the target element when the animation is not playing that is before it starts, after it ends, or both. The animation-fill-mode property can have the following values:

  • none: Animation will not apply any styles to the element before or after it is executing.This is default.
  • forwards: The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
  • backwards: The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
  • both: The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

8) animation-play-state: specifies whether the animation is running or paused.The property can have the following values:

  • paused: Specifies that the animation is paused
  • running : Specifies that the animation is running. This is the default. This property can be used in Javascript to pause the animation in the middle of the cycle. Using animation play state in javascript

There's also an animation shorthand property:

animation : animation-name animation-duration animation-fill-mode animation-delay animation-iteration-count animation-direction;

To define the appearance of your animation,this can be done using keyframes rule,the keyframe describes how the animated element should render at a given time during the animation sequence. It can be done using percentages that is 0% (starting point) to 100% (end point) OR using 'from and to

To understand better, here is an example

index.html

<section>
  <div class="squareLogo">
     <span>   FAE  </span>
  </div>
</section>

style.css

      body{
        background-color: #472383;
      }
      .squareLogo{
        width:100px;
        height:100px;
        border-radius: 10px;
        text-align: center;
        color:#472383;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50px auto;
        animation: Moving 3s ease forwards 1s infinite normal;
      }

      @keyframes Moving{
        0%{ transform: rotate(0deg);}

        25%{ transform: rotate(72deg);}

        50%{ transform: rotate(144deg);}

        75%{ transform: rotate(216deg);
        }

        100%{ transform: rotate(360deg);}
      }


  .squareLogo  span { 
  animation-name: showUp;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal ;
}
@keyframes showUp {
  from {
    opacity:0;
  }

  to {
  opacity:1;
  }
}

Final Output

https://codepen.io/coded_fae/pen/GRZydNz

Note - The browser support for CSS animations varies across different browsers,you can find out more in the HERE

More References:

frontendwomenwhocodeCSS3