how to use animation css code example

Example 1: animation in css

/* 
========================
   Animation 
========================
animation-name: We have to create our animation "example" etc.
animation-duration:         4s;
animation-delay:            1s;
animation-iteration-count:  4;
animation-direction:        normal/reverse/alternate/alternate-reverse;
animation-timing-function:  ease/ease-in/ease-out/ease-in-out;
animation-fill-mode:        forwards/backward;
*/

@keyframes example {
    from {
        color: #a8dadcff;
    }
    to {
        color: #e63946ff;
    }
}

.animation {
    animation-name: "example";
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    /* animation-direction: reverse; */
}

Example 2: css animation

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>CSS Animation</title>

      <style>
         .element {
            height: 250px;
            width: 250px;
            margin: 0 auto;
            background-color: red;
            animation-name: stretch;
            animation-duration: 1.5s;
            animation-timing-function: ease-out;
            animation-delay: 0;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-fill-mode: none;
            animation-play-state: running;
         }

         @keyframes stretch {
            0% {
               transform: scale(0.3);
               background-color: red;
               border-radius: 100%;
            }
            50% {
               background-color: orange;
            }
            100% {
               transform: scale(1.5);
               background-color: yellow;
            }
         }

         body,
         html {
            height: 100%;
         }

         body {
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <div class="element"></div>
   </body>
</html>

Tags:

Html Example

Recent Posts