css3 animation
Affichage des articles dont le libellé est css3 animation. Afficher tous les articles
Affichage des articles dont le libellé est css3 animation. Afficher tous les articles

CSS3 - Simple ProgressBar Animation

Add Comment

How To Make A Basic ProgressBar Animation In CSS3
In This CSS Tutorial we will see How To Make A ProgressBar Animation Using Keyframes In CSS3 In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title> CSS Progress Bar </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            
            div{background-color: #ddd;width: 250px}
            span{background-color: red;height: 25px;display: block;
                 animation: prog 2s linear forwards}
            
            @keyframes prog{
                
                0%{width:0%}
                100%{width:100%;background-color:green}
            }
            
        </style>
    </head>
    <body>
       
        <div>
            <span></span>
        </div>
        
    </body>
</html>

OutPut:

css progress bar animation

CSS3 Moving A Div Animation

Add Comment

How To Move A Div In CSS3

css move div
In This CSS Tutorial we will see How To Make A Moving Div Animation Using Keyframes In CSS3 In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Moving Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{background-color: #ddd;padding: 25px;}
            .content{width: 100px;height: 100px;background-color: red;
                     animation: move 5s linear infinite; }
            
            @keyframes move{
                
                0%{
                    transform:translate(0);
                    opacity:0;
                }
                
                50%{
                    transform:translate(1100px);
                    opacity:1;
                }
                100%{
                    opacity:0;
                }
            }
            
        </style>
        
    </head>
    <body>

        <div class="container">
            <div class="content"></div>
        </div>
        
    </body>

</html>

CSS Slide Rollover Animation

Add Comment

How To Create Slide Rollover Animation  Using CSS3
In This CSS Tutorial we will see How To Make Image Rollover Slide Using HTML And CSS3 In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Css Image Overflow</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          
            .main{
                height: 50px;width: 100px;overflow: hidden;
            }
            .main img{margin-top: -50px;transition: all .5s ease-in-out}
            .main img:hover{margin-top: 0}
            
            .main2{margin-top: 10px;
                height: 100px;width: 50px;overflow: hidden;
            }
            .main2 img{margin-left: 0;transition: all .5s ease-in-out}
            .main2 img:hover{margin-left: -50px;}
            
        </style>

    </head>
    <body>
        
        <div class="main">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgy.png" alt=""/> 
        </div>
        
         <div class="main2">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgx.png" alt=""/> 
        </div>
        
    </body>
</html>

CSS3 Cubic-Bezier Animation

Add Comment

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 


Inscription à : Articles (Atom)