Friday, February 26, 2016

Pure CSS Animations




Sample Text

--------------------------------------------------------------------------------------------------
HTML:
--------------------------------------------------------------------------------------------------

<div>
        <img class="absolute-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG5dKM0BEdc_URKKEBSOFyjhYrVyrxTm4ODt3OezCB13z_7lWT4MQ-mzS5fZTxiY9dQ9d729Vl8rjJ6FuiaqmCnVsi1_eod9e1vDTrCdTT677oss7nCklJNhucsr9PL_4MbKtH5QT61_XZ/s1600/Icon.png" style="padding: 10px;">
        <img class="absolute-img rotate-anticlock-wise" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyazKJXZf_sIwTF5ZR-DVpF6PMsjDHgHxwquECue1kFvibAQY2BFS2Vv9jCn7yk9tCe0JlSbiJxUX415-JHXurMjmhftynyso9n_LIAF_LNBNt52dW-OiWhJQXK69qHS5RB45Z47WHfd3A/s1600/C1.png" style="padding: 10px;">
        <img class="absolute-img rotate-clock-wise" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYnx2DzOAGVIAciwloiKqdd_mbM4YFyNZexjE9Jj3_wjxQ2XtI0NTSyxrbLxP-ArGF8powDxqX5wCoELD29TDrdGuoUfeXwRlMxqkGlgEcaEH-8-RzOd1NJQBjX5CKmFkuHgfCUzy4gWZM/s1600/C2.png" style="padding: 10px;">
        <br>
        <h4 class="bm-10 center relative-text">Sample Text</h4>
</div>

--------------------------------------------------------------------------------------------------
CSS:
--------------------------------------------------------------------------------------------------

.absolute-img {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .relative-text {
        position: relative;
        top: 220px;
    }
    @keyframes rotatecw {
        to {
            transform: rotate(360deg);
        }
    }
    .rotate-clock-wise {
        animation: 2s rotatecw infinite linear;
    }
    @keyframes rotateaw {
        to {
            transform: rotate(-360deg);
        }
    }
    .rotate-anticlock-wise {
        animation: 4s rotateaw infinite linear;

    }

--------------------------------------------------------------------------------------------------
Fiddle:
--------------------------------------------------------------------------------------------------

https://jsfiddle.net/thisisdev4u/9yuowvd4/

No comments:

Post a Comment