Change the value depend on css animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Animation Control

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Animation Control

Description

Change the value depend on css animation

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
 <head> 
  <style>

#sun {<!--from  ww w .j a v a2  s .c o  m-->
   position: absolute;
   width: 55px;
   height: 55px;
   border: 1px solid red;
   background-color: orange;
   opacity: 0.9;
   border-radius: 100%;
   text-align: center;
   animation: round 3s infinite linear;
}
#demo:after {
   content: "1";
   animation: round1 3s infinite linear;
}
@keyframes round {
   0%   {transform: rotate(0deg);}
   25%  {transform: rotate(90deg);}
   50%  {transform: rotate(180deg);}
   75%  {transform: rotate(270deg);}
   100% {transform: rotate(360deg);}
}
@keyframes round1 {
   0%   {content: "1";}
   25%  {content: "2.5";}
   50%  {content: "5";}
   75%  {content: "7.5";}
   100% {content: "1";}
}


      </style> 
 </head> 
 <body> 
  <p id="sun">sun</p> 
  <p id="demo"></p>  
 </body>
</html>

Related Tutorials