<!DOCTYPE html>
<html>
<head>
<title>CSS animation timing function</title>
<style>
.box {
height: 150px;
width: 150px;
border-radius: 5px;
margin: 100px;
}
.speedy {
background-color:#4535AA;
animation-name: ghumo;
animation-duration: 4s;
animation-iteration-count: 5;
/
CSS property comes here */
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 40);
}
.slowy {
background-color:#FFB643;
animation-name: ghumo;
animation-duration: 4s;
animation-iteration-count: 5;
/* CSS property comes here /
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
}
@keyframes ghumo {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="box speedy"></div>
<div class="box slowy"></div>
</body>
</html>
