<!DOCTYPE html>
<html>
<head>
    <title>Animation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../test.js"></script>
    <style>
        span {
            color:blue;
        }
        p {
            background-color: green;
        }
        div {
            background: red;
            border: 5px solid blue;
            animation: spin 3s linear 1s infinite;
        }
        body {
            font-family: Arial;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */ }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */ } }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */ }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */ } }
    </style>

</head>
<body>
<div style="clip: rect(0px, 400px, 50px, 200px); ">Some inline text <span> followed by text in span </span> followed by more inline text.
    <p>Then a block level element.</p>
    Then more inline text.</div>
</body>
</html>