CSS3 Cubic-Bezier Animation

How To Create An Animation With Cubic Bezier Using CSS3

Css3 Keyframes & Cubic-Bezier



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 



Share this

Related Posts

Previous
Next Post »