Cubic-bezier in JavaScript
Cubic-bezier in JavaScript
HTML
<div class="ball"></div>
CSS
.ball{
background: red;
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 50%;
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.10, .10, 1, 0);
transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}
@keyframes bounce {
0% {
left: 0%;
}
100% {
left: 100%;
}
}