Animating right to left in CSS3

How to animate text from right to left using CSS

Animating text from right to left

The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another

Moving left animation

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

            /*for firefox*/
            -moz-animation-duration: 1s;
            -moz-animation-name: slidein;

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

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

        @-webkit-keyframes slidein {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }

        @-moz-keyframes slidein {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
         @-o-keyframes slidein {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
          @keyframes slidein {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h1>TechFunda</h1>
    <button onclick="myFunction()">Click here to load</button>
    <script>
        function myFunction() {
            location.reload();
        }
    </script>
</body>

In the above code snippet we have defined the keyframe animation using keyframe animation, we have webkit-animation duration as 1s which defines the speed pf the animation and name as slidein and in the nextline we are having the keyframe with name as slide in to change text from right to left by giving values in the margin left and width, in the main function of the program we have button to reload the page by using script function as reload by giving myfunction in the button

output