Animation di chuyển sang trái với @keyframes trong CSS3

Giới thiệu

Bạn có thể thử mã sau để tạo animation di chuyển sang trái với keyframes trong CSS3:

Ví dụ

<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>Đây là ví dụ animation sang trái với keyframe bổ sung để thay đổi văn bản.</p>
    <button onclick="myFunction()">Tải lại trang</button>
    <script>
        function myFunction() {
            location.reload();
        }
    </script>
</body>
</html>