Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Css3 Animation

    Încărcat de

    Sharth Kumar
    36 vizualizări3 pagini
    this book is a css3 animation

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    this book is a css3 animation

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    36 vizualizări3 pagini

    Css3 Animation

    Încărcat de

    Sharth Kumar
    this book is a css3 animation

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 3

    CSS3 - ANIMATION

    http://www.tutorialspoint.com/css/css3_animation.htm Copyright tutorialspoint.com

    Animation is process of making shape changes and creating motions with elements.

    @keyframes
    Keyframes will control the intermediate animation steps in CSS3.

    Example of key frames with left animation


    @keyframes animation {
    from {background-color: pink;}
    to {background-color: green;}
    }
    div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: animation;
    animation-duration: 5s;
    }

    The above example shows height, width, color, name and duration of animation with keyframes
    syntax

    Moving left animation


    <html>
    <head>

    <style type="text/css">
    h1 {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    }
    @-moz-keyframes slidein {
    from {
    margin-left:100%;
    width:300%
    }
    to {
    margin-left:0%;
    width:100%;
    }
    }
    @-webkit-keyframes slidein {
    from {
    margin-left:100%;
    width:300%
    }
    to {
    margin-left:0%;
    width:100%;
    }
    }
    </style>

    </head>
    <body>
    <h1>Tutorials Point</h1>
    <p>this is an example of moving left animation .</p>
    <button onclick="myFunction()">Reload page</button>
    <script>
    function myFunction() {
    location.reload();
    }
    </script>
    </body>
    </html>

    It will produce the following result

    Moving left animation with keyframes


    <html>
    <head>

    <style type="text/css">
    h1 {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    }
    @-moz-keyframes slidein {
    from {
    margin-left:100%;
    width:300%
    }
    75% {
    font-size:300%;
    margin-left:25%;
    width:150%;
    }
    to {
    margin-left:0%;
    width:100%;
    }
    }
    @-webkit-keyframes slidein {
    from {
    margin-left:100%;
    width:300%
    }
    75% {
    font-size:300%;
    margin-left:25%;
    width:150%;
    }
    to {
    margin-left:0%;
    width:100%;
    }
    }
    </style>

    </head>
    <body>
    <h1>Tutorials Point</h1>
    <p>This is an example of animation left with an extra keyframe to make text
    changes.</p>
    <button onclick="myFunction()">Reload page</button>
    <script>
    function myFunction() {
    location.reload();
    }
    </script>
    </body>
    </html>

    It will produce the following result

    S-ar putea să vă placă și