Ví dụ keyframes với animation di chuyển sang trái trong CSS3

Giới thiệu

Ví dụ sau minh họa chiều cao, chiều rộng, màu sắc, tên và thời gian animation với cú pháp keyframes:

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