How To Create An Animation With Cubic Bezier Using CSS3
In This CSS Tutorial we will see How To Make An Animation Using Keyframes And Cubic-Bezier Using HTML And CSS3 In Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Animation: Cubic-Bezier</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main{
width: 50px;
height: 50px;
background-color: red;
border-radius:50%;
margin: 100px auto 0 auto;
animation: myAnimation 2s cubic-bezier(1,-0.52,0,1.76) infinite;
}
@keyframes myAnimation
{
0%{
transform:scale(1);
border-radius:0;
}
50%{
transform:scale(3);
border-radius:50%;
}
100%{
transform:scale(1);
border-radius:0;
}
}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>
Useful WebSite Cubic-Bezier