Uncategorized

Animation video

<!doctype html>
<html>
<head></head>

<body>
<div class=”ball”></div>
</body>
</html>

<style>
body {
display: flex;
justify-content: center;
}

.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;

animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5,0.05,1,.5);
animation-iteration-count: infinite;
}

@keyframes bounce {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 200px, 0); }
}

/* Prefix Support */
ball {
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); }
}
</style>