css animate code example

Example 1: css animation

<style>
.my-element {
  width: 100%;
  height: 100%;
  animation: tween-color 5s infinite;
}

@keyframes tween-color {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

html,
body {
  height: 100%;
}
<style>

<body>
	<div class="my-element"></div>
</body>

Example 2: css animation

CSS animation properties template:
{
   animation-name: anima-name;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-direction: reverse | normal | alternate | alternate-reverse ; 
  animation-timing-function: ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)); 
  animation-fill-mode:forwards | backwards | both | none;
}
@keyframes anima-name {
  from {
   background-position:right;
  }
  to {
    background-position:left;
  }
}
@keyframes anima-name {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

Example 3: animation css

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div><p>you can add text in this box or anithing else like a pictrue</p></div>

</body>
</html>

Example 4: animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

/* 
==========================================
    Animation Using Animate.css Library
==========================================
We can use these styling to apply animate.css using css:
  animation: bounce;            
  animation-duration: 2s;       
  animation-iteration-count:    
  animation-delay: 1s;

Utility classes: (Animate.css comes packed with a few utility classes to simplify its use)

Always use "animate__animated" keyword to activate animation. Then we can use below classes to start animation.

  animate__fadeIn               animate__slow 	  2s          animate__repeat-1 	1         animate__delay-2s     
  animate__fadeInDown           animate__slower 	3s          animate__repeat-2 	2         animate__delay-3s
  animate__fadeInLeft           animate__fast 	  800ms       animate__repeat-3 	3         animate__delay-4s
  animate__fadeInRight          animate__faster 	500ms
  animate__fadeInUp
*/

Example 5: how to animate in css

<style>
.myclass{
  background:red; /*DEFAULT VALUE*/
  animation:colorchange 1s; /*ANIMATION PROPERTY [name, time]*/
}
@keyframes colorchange{
  from{background:red} /*DEFAULT VALUE*/
  to{background:blue} /*CHANGING VALUE*/
}
</style>
<body>
<div class="myclass"> ELEMENT </div>
</body>

Example 6: animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

Tags:

Shell Example

Recent Posts