CSS3 > Animations

Animating text in CSS3

How to move text from right to left using extra keyframe animation in css


Animating fontsize

It moves the text from right side to left side using keyframe animation 

<style>
        h1 {
            /*for chrome and safari*/
            -webkit-animation-duration: 3s;
            -webkit-animation-name: slidein;
            
            /*for firefox*/
            -moz-animation-duration: 3s;
            -moz-animation-name: slidein;

              /*for opera*/
            -o-animation-duration: 3s;
            -o-animation-name: slidein;

            /*Standard syntax*/
            animation-duration: 3s;
            animation-name: slidein;
        }

        @-webkit-keyframes slidein {
            from {
                margin-left: 80%;
                width: 300%;
                color: green;
            }

            50% {
                font-size: 1000%;
                margin-left: 25%;
                width: 150%;
                color: blue;
            }

            to {
                margin-left: 30%;
                width: 100%;
                color: yellow;
            }
        }

        @-moz-keyframes slidein {
            from {
                margin-left: 80%;
                width: 300%;
                color: green;
            }

            50% {
                font-size: 1000%;
                margin-left: 25%;
                width: 150%;
                color: blue;
            }

            to {
                margin-left: 30%;
                width: 100%;
                color: yellow;
            }
        }

         @-o-keyframes slidein {
            from {
                margin-left: 80%;
                width: 300%;
                color: green;
            }

            50% {
                font-size: 1000%;
                margin-left: 25%;
                width: 150%;
                color: blue;
            }

            to {
                margin-left: 30%;
                width: 100%;
                color: yellow;
            }
        }

          @keyframes slidein {
            from {
                margin-left: 80%;
                width: 300%;
                color: green;
            }

            50% {
                font-size: 1000%;
                margin-left: 25%;
                width: 150%;
                color: blue;
            }

            to {
                margin-left: 30%;
                width: 100%;
                color: yellow;
            }
        }
    </style>
</head>
<body>
    <p><i>Animation with extra keyframe animation</i></p>
    <h1>TechFunda</h1>
    <button onclick="myFunction()">Reload page</button>
    <script>
        function myFunction() {
            location.reload();
        }
    </script>
</body>

In the above code snippet we have defined animation with keyframe moving text from right to left, we have webkit animation as 3s which animates in 3 seconds and webkit name as slidein, in the webkit keyframes slidein, we have three steps from margin left as 80% whiich starts form 80% with color green  and at 50% with color blue and moves to margin left up to 30 % and changes color

output

     

 Views: 461 | Post Order: 105



Write for us