Some simple CSS animations

by Erik Woods

HTML

<p>Hover to animate.</p>

<div class="i"><span>1A</span><div class="rotate1"></div></div>

<div class="i"><span>1A--two</span><div class="rotate1--two"></div></div>

<div class="i"><span>1B</span><div class="rotate1b"></div></div>

<div class="i"><span>1B--two</span><div class="rotate1b--two"></div></div>

<div class="i"><span>1C</span><div class="rotate1c"></div></div>

<div class="i"><span>1C--two</span><div class="rotate1c--two"></div></div>

<div class="i"><span>1D</span><div class="rotate1d"></div></div>

<div class="i"><span>1D--two</span><div class="rotate1d--two"></div></div>

<div class="i"><span>1E</span><div class="rotate1e"></div></div>

<div class="i"><span>1E--two</span><div class="rotate1e--two"></div></div>

<div class="i"><span>2A</span><div class="rotate2"></div></div>

<div class="i"><span>2A--two</span><div class="rotate2--two"></div></div>

<div class="i"><span>2B</span><div class="rotate2b"></div></div>

<div class="i"><span>2B--two</span><div class="rotate2b--two"></div></div>

<div class="i"><span>3A</span><div class="rotate3"></div></div>

<div class="i"><span>3A--two</span><div class="rotate3a--two"></div></div>

<div class="i"><span>3B</span><div class="rotate3b"></div></div>

<div class="i"><span>3B--two</span><div class="rotate3b--two"></div></div>

<div class="i"><span>4A</span><div class="rotate4"></div></div>

<footer>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

CSS

body {
    background: #2081bf;
    color: #fff;
    font-family: Verdana;
    margin-bottom: 30px;
}

hr {
    color: #fff;
}

.i {
    display: inline-block;
    padding: 50px;
    position: relative;
}

.i:hover {
    background: #0c4569;
    cursor: pointer;
}

.i span {
    left: 10px;
    position: absolute;
    top: 10px;
}

.i [class*="rotate"] {
    background: transparent;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-radius: 100%;
    height: 25px;
    width: 25px;
}

.i [class*="--two"] {
    border-top-color: transparent;
}

.i:hover [class*="rotate"] {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.i [class*="rotate1"] {
    -webkit-animation: rotate 1s 0s linear infinite paused;
    animation: rotate 1s 0s linear infinite paused;
}

.i [class*="rotate1b"] {
    -webkit-animation: rotate .5s 0s linear infinite paused;
    animation: rotate .5s 0s linear infinite paused;
}

.i [class*="rotate1c"] {
    -webkit-animation: rotate 1s 0s linear infinite reverse paused;
    animation: rotate 1s 0s linear infinite reverse paused;
}

.i [class*="rotate1d"] {
    -webkit-animation: rotate .5s 0s linear infinite reverse paused;
    animation: rotate .5s 0s linear infinite reverse paused;
}

.i [class*="rotate1e"] {
    -webkit-animation: rotate 1s 0s linear infinite alternate paused;
    animation: rotate 1s 0s linear infinite alternate paused;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.i [class*="rotate2"] {
    -webkit-animation: rotate2 1s 0s linear infinite paused;
    animation: rotate2 1s 0s linear infinite paused;
}

.i [class*="rotate2b"] {
   ...