in

CSS ANIMATION | Learn How To Build Web Animation Using CSS

In this tutorial we will be discussing about CSS Animation which entails how to build and add animations to your web document. In our previous tutorial we looked at CSS 3D TRANSFORM and how you can transform an element in three dimension. If you haven’t gone through the tutorial you can do using the link below

Read previous tutorial on: CSS 3D TRANSFORM | Transform Element In 3D Using CSS

CSS ANIMATION

Building animations on your web page is easy with the help of CSS properties. Animation involves making elements on your web page move. Motions of this object elements can be in any direction and this movement can be achieved with the help of @keyframes

A simple example of the style structure of CSS animation

<style>
      @keyframes animation {
   from {background-color: grey;}
   to {background-color: green;}
}
div {
   width: 170px;
   height: 160px;
   background-color: red;
   animation-name: animation;
   animation-duration: 6s;
}
.image_trans {
   width: 200px;
   height: 300px;
   background-color: black;
   animation-name: animation;
   animation-duration: 5s;
   color: white;
   text-decoration-color: white;
}
   
   </style>

Moving Left CSS Animation

The below example shows a color animation for the body of a web page

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      @keyframes animationstill {
   from {background-color: pink;}
   to {background-color: green;}
}
.image_trans01 {
   width: 150px;
   height: 100px;
   background-color: black;
   animation-name: animationstill;
   animation-duration: 5s;
   color: white;
   text-decoration-color: white;
}
   
   </style>
   <title>ILLUSTRATION OF ANIMATION PROPERTY</title>
</head>
<body >
   <div class="image_trans01" >
      DEVELOFERD
   </div>
   <br>
   <button onclick = "myFunction()">Reload page</button>
   <script>
      function myFunction() {
         location.reload();
      }
   </script>
</body>
</html>

RESULT

ILLUSTRATION OF ANIMATION PROPERTY
DEVELOFERD

Click on the reload page button to see the animation effect

Simple Moving left animation

The below example shows a moving left animation displaying “happy holiday”

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      @keyframes animation {
         from{
            margin-left:100%;
               width:50%
         }
         to{
            margin-left:0%;
               width:50%
         }
  
}
.image_trans1 {
   width: 150px;
   height: 50px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
   text-align: center;
   font-size: xx-large;
   color: white;
}
.image_trans {
   width: 150px;
   height: 50px;
   background-color: black;
   animation-name: animation;
   animation-duration: 5s;
   color: white;
   text-decoration-color: white;
   text-align: center;
   font-size: xx-large;
}
   
   </style>
   <title>ILLUSTRATION OF ANIMATION PROPERTY</title>
</head>
<body >
   <div class="image_trans1" >
     HAPPY
   </div>
   <div class="image_trans" >
      HOLIDAY 
   </div>
   <button onclick = "myFunction()">Click here</button>
   <script>
      function myFunction() {
         location.reload();
      }
   </script>
</body>
</html>

RESULT

ILLUSTRATION OF ANIMATION PROPERTY
HAPPY
HOLIDAY

CONCLUSION

Will this short tutorial we hope you are able to make use of CSS animation properties to add animations structures to your web page.

What do you think?

css 3d transform

CSS 3D TRANSFORM | Transform Element In 3D Using CSS

introduction to javascript

Introduction to JavaScript and its Importance