in animation on css code example

Example 1: 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>

Example 2: css animation

<style>

  #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    /*"Call" the animation "function" */
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    /* Normal, reverse, alternate(between the fwd and back) 
    and alternate-reverse */
    animation-direction: reverse; 
    /* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
    animation-timing-function: linear; 
    
    /* if you want something to display from hidden
       set the opacity to 0 and in the keyframe steps bring
   	   the opacity to 1 gradually to stop it flashing */
  }
	
  /* The animation "bounce" */
  @keyframes bounce{
    /* start */
    0% {
      top: 0px;
    }
    /* step (you can add multiple incremental steps from 1-100) */
    50% {
      top: 249px;
      width: 130px;
      height: 90px;
    }
    /* end (you can count down from 100 to 0 too) */
    100% {
      top: 0px;
    }
  }
</style>

<div id="ball"></div>

Tags:

Css Example

Recent Posts