CSS Animation with cubic-bezier()
CSS Animation with cubic-bezier()
With the help of cubic-bezier we can control the timing of the element and transition. It is commonly used to shape the css animation,cubic-bezier() increase the speed of transition. bezier curve is defined by 4 values.
Syntax:
cubic -bezier(x1,y1,x2,y2)
where as,
x1= Starting point of x.
y1= Stating point of y.
x2= Ending point of x
y2= Ending point of y
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Cubic-Bezier</title>
<style>
.cubic-bezier {
margin: 100px auto;
width: 200px;
transition-timing-function: cubic-bezier(0,0,1,50);
padding: 30px;
animation: changes 4s infinite;
}
@keyframes changes {
0% {
background:red;
border-radius:0%;
}
50% {
background: Blue;
border-radius: 50%;
}
100% {
background: red;
border-radius:0%;
}
}
</style>
</head>
<body>
<div class="cubic-bezier">
<h5>Cubic-Bezier</h5>
</div>
</body>
</html>
OUTPUT:
