Tuesday, 20 May 2014

CSS3 keyframes 

<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>

  #ball {
  width: 160px;
  height: 160px;
  border-radius: 80px;
  background: rgb(25,100,150);
  position: absolute;
  -webkit-animation: bounce 1s infinite;
  -moz-animation: bounce 1s infinite;
  -o-animation: bounce 1s infinite;
  -ms-animation: bounce 1s infinite;
  animation: bounce 1s infinite;
}


@-webkit-keyframes bounce {
  0% {top: 0;
    -webkit-animation-timing-function: ease-in;
  }
  40% {}
  50% {top: 140px;
    height: 140px;
    -webkit-animation-timing-function: ease-out;
  }
  55% {top: 160px; height: 120px; border-radius: 70px / 60px;
    -webkit-animation-timing-function: ease-in;}
  65% {top: 120px; height: 140px; border-radius: 70px;
    -webkit-animation-timing-function: ease-out;}
  95% {
    top: 0;   
    -webkit-animation-timing-function: ease-in;
  }
  100% {top: 0;
    -webkit-animation-timing-function: ease-in;
  }
}

@-moz-keyframes bounce {
  0% {top: 0;
    -moz-animation-timing-function: ease-in;
  }
  40% {}
  50% {top: 140px;
    height: 140px;
    -moz-animation-timing-function: ease-out;
  }
  55% {top: 160px; height: 120px; border-radius: 70px / 60px;
    -moz-animation-timing-function: ease-in;}
  65% {top: 120px; height: 140px; border-radius: 70px;
    -moz-animation-timing-function: ease-out;}
  95% {
    top: 0;   
    -moz-animation-timing-function: ease-in;
  }
  100% {top: 0;
    -moz-animation-timing-function: ease-in;
  }
}

@-ms-keyframes bounce {
  0% {top: 0;
    -ms-animation-timing-function: ease-in;
  }
  40% {}
  50% {top: 140px;
    height: 140px;
    -ms-animation-timing-function: ease-out;
  }
  55% {top: 160px; height: 120px; border-radius: 70px / 60px;
    -ms-animation-timing-function: ease-in;}
  65% {top: 120px; height: 140px; border-radius: 70px;
    -ms-animation-timing-function: ease-out;}
  95% {
    top: 0;   
    -ms-animation-timing-function: ease-in;
  }
  100% {top: 0;
    -ms-animation-timing-function: ease-in;
  }
}

@keyframes bounce {
  0% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 140px;
    height: 140px;
    animation-timing-function: ease-out;
  }
  55% {
    top: 160px; 
    height: 120px; 
    border-radius: 70px / 60px;
    animation-timing-function: ease-in;
  }
  65% {
    top: 120px; 
    height: 140px; 
    border-radius: 70px;
    animation-timing-function: ease-out;
  }
  95% {
    top: 0;   
    animation-timing-function: ease-in;
  }
  100% {
    top: 0;
    animation-timing-function: ease-in;
  }
}
    </style>
</head>
<body>
  <div id="ball"></div>
</body>
</html>
on
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)