Css3 animation pause at the middle of the screen - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Animation Control

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

Description

Css3 animation pause at the middle of the screen

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--   w  ww. j  a v  a2  s  . c om-->
   margin: 0;
   padding: 0;
}
#ball {
   width: 50px;
   height: 50px;
   background: green;
   border-radius: 50%;
   position: absolute;
   left: -50px;
   -webkit-animation: move 8s;
   -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes move{ 
37.5% {
   left: calc(50% - 25px); opacity: 1;
}
75% {
   left: calc(50% - 25px); opacity: 1;
}
85% {
   left: 80%; opacity: 0;
}
100% {
   opacity: 0;
}
}


      </style> 
 </head> 
 <body> 
  <div id="ball"></div>  
 </body>
</html>

Related Tutorials