CSS Animations

Used before category names. CSS

Animations

With css you can animation of HTML elements without using JavaScript.

For define an animation in css you should use this syntax.

@keyframes animationName {
  from {css properties}
  to {css properties} 
}

div {
  width: 300px;
  height: 200px;
  background-color: blue;
  animation-name: animationName;
  animation-duration: 2s;
}
//Example 1:
@keyframes mytest {
  from { background-color: yellow; }
  to { background-color: green; }
}

div {
  width: 300px;
  height: 200px;
  background-color: blue;
  animation-name: mytest;
  animation-duration: 2s;
}
//Example 2:
@keyframes mytest2 {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
}

div {
  width: 300px;
  height: 200px;
  background-color: blue;
  animation-name: mytest2;
  animation-duration: 2s;
}
Example 3:
  div {
    width: 120px;
    height: 50px;
    background-color: green;
    position: relative;
    animation-name: mytest3;
    animation-duration: 3s;
    animation-delay: 2s;
  }
  
  @keyframes mytest3 {
    0%   {background-color:#ff4499; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:#cc99ff; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }