A Pen by Predrag Jovanovic.

index.html

<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<div class="container">

  <h1>Css Loaders</h1>
	<section>
    	<div id="gears">
    	<img class="green" src="http://designrevolution.rs/loaders/greengear.svg" alt="Green gear">
        <img class="yellow" src="http://designrevolution.rs/loaders/yellowgear.svg" alt="Yellow gear">
        </div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    <section>
        <div id="outline">
            <div class="circle">
            </div>
        </div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    <section>
    	<div id="loading">
			<h2>Loading</h2>
		</div>
        <div class="desc">Chrome, <em>Firefox</em>, <em>IE</em></div>
    </section>
    
    <section>
        <div id="motorcycle">
            <div class="wallofdeath">
                <div class="motorcycle">
                    <img class="caferacer" src="http://designrevolution.rs/loaders/motorcycle.svg" alt="motorcycle">
                </div>
            </div>
        </div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    <section>
        <div id="pie_load">
            <div class="spinner">
              <div class="spinner-inner"></div>
              <div class="spinner-mask"></div>
              <div class="spinner-mask-two"></div>
            </div>
        </div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    <section>
        <div class="loader"></div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    <section>
    	<div class="center"></div>
		<div class="ringholder">
            <div class="ring1">
                <div class="ring2">
                    <div class="ring3"></div>
                </div>
            </div>
        </div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    <section>
		<div class="solar_system">
            <div class="orbit1">
                <div class="planet_holder">
                    <div class="planet">
                    </div>
                </div>
            </div>
            <div class="orbit2">
                <div class="planet_holder2">
                    <div class="planet2">
                    </div>
                </div>
            </div>
            <div class="orbit3">
                <div class="planet_holder3">
                    <div class="planet3">
                    </div>
                </div>
            </div>
            <div class="sun"></div>
        </div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    <section>
        <div class="wormholder">
            <div class="bubble head">
                <div class="eye eye_l">
                    <div class="dot"></div>
                </div>
                <div class="eye eye_r">
                    <div class="dot"></div>
                </div>
                <div class="nose"></div>
                <div class="mouth"></div>
            </div>
            <div class="bubble bubble1"></div>
            <div class="bubble bubble2"></div>
            <div class="bubble bubble3"></div>
            <div class="bubble bubble4"></div>
            <div class="bubble bubble5"></div>
            <div class="bubble bubble6"></div>
            <div class="bubble bubble7"></div>
            <div class="bubble bubble8"></div>
        </div>
        <div class="desc">Chrome, Firefox, IE</div>
    </section>
    
    
</div>

Pure-css-loaders-and-spinners.markdown

Pure css loaders and spinners

Just having fun with css animations. Check it out.

A Pen by Predrag Jovanovic on CodePen.

License.

style.css

/* ------ Global styles -------*/

 * {
	 margin:0;
	 padding:0;
}
body { 
    background-color:#4e7a9d;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

h1 {
    text-align: center;
    margin: 10px 0;
}
p {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2em;
}
.container {
	width:606px;
	height:400px;
	margin:0 auto;
}

section {
	display:block;
	width:200px; height:200px;
	float:left;
	border:1px solid rgba(255,255,255,.5);
	position:relative;
	}
.desc {
    text-align: center;
    position:absolute;
    bottom: 10px;
    margin-left: 10px;
    font-size: 14px;
}
    .desc em {
        text-decoration: line-through;
        font-style: normal;
    }


/* ------- Gears ------*/

#gears {
	width:100px;
	height:100px;
	position:relative;
	border-radius:50%;
	box-shadow:inset 0 0 5px rgba(0,0,0,.8);
	overflow:hidden;
	margin:50px auto 0;
	z-index:3;
	background:#333;
}
    .green {
        -webkit-animation: spin 4s linear infinite;
        -moz-animation: spin 4s linear infinite;
        animation: spin 4s linear infinite;
        position: relative;
        width: 100px;
        left: -35px;
        top: -40px;
        }

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

    .yellow {
        position: absolute;
        top: 23px;
        left: 2px;
        -webkit-animation: spiny 2.4s linear infinite;
        animation: spiny 2.4s linear infinite;
        width: 100px;
        }
    @-webkit-keyframes spiny { 
        100% { -webkit-transform: rotate(-360deg); } }
    @keyframes spiny { 
        100% { transform: rotate(-360deg);  } }

/* ------- Outline ------*/

#outline {
	width:70px; height:70px;
	margin:55px auto;
	}
    .circle {
        width:70px; height:70px;
        border-radius:50%;
        border-top: 2px solid rgba(255, 255, 255, 0.2);
        border-right: 2px solid rgba(255, 255, 255, 0.2);
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        border-left: 2px solid #ffffff;
        -webkit-animation: circle 2s infinite linear;
        animation: circle 2s infinite linear;
        }
    
    @-webkit-keyframes circle { 
        100% { -webkit-transform: rotate(360deg); } }
    @keyframes circle { 
        100% { transform: rotate(360deg); transform:rotate(360deg); } }



/* ------- Loading text ------*/


#loading {
		padding: 5px;
		background: #4e7a9d;
		margin:65px 0 50px 0;
		overflow: hidden;
		text-align:center;
}

    h2 {
      background: -webkit-gradient(linear,left top,right top,
                    color-stop(0%, #fff),
                    color-stop(10%, #fff),
                    color-stop(11%, #333),
                    color-stop(100%, #333));
     background: -moz-gradient(linear,left top,right top,
                    color-stop(0%, #fff),
                    color-stop(10%, #fff),
                    color-stop(11%, #4d4d4d),
                    color-stop(100%, #4d4d4d));
     background: -ms-gradient(linear,left top,right top,
                    color-stop(0%, #fff),
                    color-stop(10%, #fff),
                    color-stop(11%, #333),
                    color-stop(100%, #333));

      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation: loading 3s infinite;
      -webkit-animation-timing-function: linear;
      -moz-background-clip: text;
      -moz-text-fill-color: transparent;
      -moz-animation: loading 3s infinite;
      -moz-animation-timing-function: linear;
      background-clip: text;
      text-fill-color: transparent;
      animation: slidetounlock 3s infinite;
      animation-timing-function: linear;
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      font-size: 36px;
      padding: 0;
      width: 100%;
    }
    
@-webkit-keyframes loading {
  0%   {background-position: -200px 0;}
  100% {background-position: 200px 0;}
}
@keyframes loading {
    0% {background-position: -200px 0;}
  100% {background-position: 200px 0; }
}


/* ------- Motorcycle ------*/

#motorcycle {
	width:100px; height:100px;
	margin:45px auto;
}
	
    .wallofdeath {
        border:3px solid #fff;
        width:100px; height:100px;
        border-radius:50%;
    }

    .motorcycle {
        width: 50px;
        height: 100px;
        position:relative;
        margin:0 auto;
        -webkit-animation: motorcycle 2s infinite linear;
        animation: motorcycle 2s infinite linear;
    }

    .caferacer {
        width:50px;
        height:30px;
        position:absolute;
        bottom:0;
    }
    @-moz-keyframes motorcycle { 
        100% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes motorcycle { 
        100% { -webkit-transform: rotate(-360deg); } }
    @keyframes motorcycle { 
        100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }


/* ------- pie chart loader ------*/


#pie_load {
	width:100px;
	height:100px;
	margin:45px auto;
	}

    .spinner {
        -webkit-mask: -webkit-radial-gradient(center, ellipse cover, 
            rgba(0, 0, 0, 1) 68%, 
            rgba(0, 0, 0, 0) 69.5%);
        mask: radial-gradient(center, ellipse cover, 
            rgba(0, 0, 0, 1) 68%, 
            rgba(0, 0, 0, 0) 69.5%);
        background: #4e7a9d;
        width: 100px; height: 100px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
    }
    .spinner-inner {

        top: 0; left: 0;
        background: transparent;
        width: 0; height: 0;
        border:50px solid transparent;
        border-top-color: #fff;
        -webkit-transform: rotate(-45deg);
        -webkit-animation: inner 1s linear infinite;
        transform: rotate(-45deg);
        animation: inner 1s linear infinite;
    }
    .spinner-mask {
        position: absolute;
        top: 0px; left: 0px;
        background: transparent;
        border: 50px solid transparent;
        border-top-color: #4e7a9d;
        width: 0; height: 0;
        -webkit-transform: rotate(-45deg);
        -webkit-animation: mask 1s linear infinite;
        transform: rotate(-45deg);
        animation: mask 1s linear infinite;
    }
    .spinner-mask:after, .spinner-mask-two {
        display: block;
        content:'';
        opacity: 0;
        position: absolute;
        top: 0px; left: 0px;
        background: transparent;
        border: 50px solid transparent;
        border-top-color: rgba(255,255,255,1);
        width: 0; height: 0;
        -webkit-transform: rotate(45deg);
        -webkit-animation: mask-two 1s linear infinite;
        transform: rotate(45deg);
        animation: mask-two 1s linear infinite;
    }
    @-webkit-keyframes inner {
        0% {-webkit-transform: rotate(-45deg);}
        25% {  border-left-color:transparent; }
        26% {  border-left-color: rgba(255,255,255,1);}
        50% {  border-bottom-color:transparent; }
        51% {  border-bottom-color: rgba(255,255,255,1);}
        75% {  border-right-color:transparent;}
        76% {  border-right-color: rgba(255,255,255,1);   }
        100% {
            -webkit-transform: rotate(315deg);
            border-left-color: rgba(255,255,255,1);
            border-bottom-color: rgba(255,255,255,1);
            border-right-color: rgba(255,255,255,1); }
    }
    @keyframes inner {
        0%  { transform: rotate(-45deg);}
        25% { border-left-color:transparent; }
        26% { border-left-color: rgba(255,255,255,1);}
        50% { border-bottom-color:transparent; }
        51% { border-bottom-color: rgba(255,255,255,1);}
        75% { border-right-color:transparent;}
        76% { border-right-color: rgba(255,255,255,1);   }
        100% {
            transform: rotate(315deg);
            border-left-color: rgba(255,255,255,1);
            border-bottom-color: rgba(255,255,255,1);
            border-right-color: rgba(255,255,255,1); }
    }

    @-webkit-keyframes mask {
        0% {-webkit-transform: rotate(-45deg);}
        75% {-webkit-transform: rotate(-45deg);}
        100% {-webkit-transform: rotate(45deg);}
    }
    @keyframes mask {
        0% {transform: rotate(-45deg);}
        75% {transform: rotate(-45deg);}
        100% {transform: rotate(45deg);}
    }

    @-webkit-keyframes mask-two {
        0% {opacity: 0; }
        25% {opacity: 0;}
        26% {opacity: 1;}
        100% {opacity: 1;}
    }
    @keyframes mask-two {
        0% {opacity: 0; }
        25% {opacity: 0;}
        26% {opacity: 1;}
        100% {opacity: 1;}
    }

/* ------- bars ------*/
	
    .loader,
    .loader:before,
    .loader:after {
        background: #FFF;
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
    }
    .loader:before,
    .loader:after {
        position: absolute;
        top: 0;
        content: '';
    }
    .loader:before {
        left: -1.5em;
    }
    .loader {
        text-indent: -9999em;
        margin: 8em auto;
        position: relative;
        font-size: 11px;
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
    .loader:after {
        left: 1.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    @-webkit-keyframes load1 {
        0%, 80%, 100% {
            box-shadow: 0 0 #FFF;
            height: 4em;
        }
        40% {
            box-shadow: 0 -2em #ffffff;
            height: 5em;
        }
    }
    @keyframes load1 {
        0%, 80%, 100% {
            box-shadow: 0 0 #FFF;
            height: 4em;
        }
        40% {
            box-shadow: 0 -2em #ffffff;
            height: 5em;
        }
    }

/*--------- Rings of fire --------*/
    
.ringholder {
	width:100px;
	height:100px;
	display: table;
	margin:43px auto;
	}
    
    .ring1, .ring2, .ring3 {
        border-radius:50%;
        border:2px solid #FFF;
        margin:0 auto;
        position:relative;
    }
    .ring1 {
        width:100px;
        height:100px;
        -webkit-animation: loop1 1s infinite ease-in-out;
        animation: loop1 1s infinite ease-in-out;
    }
    .ring2 {
        width:70px;
        height:70px;
        margin-top:15px;
        -webkit-animation: loop2 1s infinite ease-in-out;
        animation: loop2 1s infinite ease-in-out;
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    .ring3 {
        width:50px;
        height:50px;
        margin-top:8px;
        -webkit-animation: loop3 1s infinite ease-in-out;
        animation: loop3 1s infinite ease-in-out;
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    .center {
        position:relative;
        margin:0 auto;
        top:52%;
        background:#fff;
        border-radius:50%;
        width:10px; height:10px;
    }

    @-webkit-keyframes loop1 {
        0% {width:100px;}
        50% {width:0;  }
        100% {width:100px; }
    }
    @keyframes loop1 {
        0% {width:100px;}
        50% {width:0;  }
        100% {width:100px; }
    }
    @-webkit-keyframes loop2 {
        0% {width:75px; }
        50% {width:0; }
        100% {width:75px; }
    }
    @keyframes loop2 {
        0% {width:75px; }
        50% {width:0; }
        100% {width:75px; }
    }
    @-webkit-keyframes loop3 {
        0% {width:50px;}
        50% {width:0; }
        100% {width:50px;}
    }
    @keyframes loop3 {
        0% {width:50px;}
        50% {width:0; }
        100% {width:50px;}
    }


/* ------------ Planets --------------*/ 

.solar_system {
	margin:50px auto;
	position:relative;
    width: 80px;
}
.orbit1 {
		width: 75px; height: 100px;
		border-radius: 50%;
		border: 1px solid #FFF;
		position: absolute;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
	}
	.planet_holder {
		width: 50px; height: 50px;
		position: relative;
		-webkit-animation: planet_holder 3s linear infinite;
        animation: planet_holder 3s linear infinite;

		}	
	.planet {
		width:10px; height:10px;
		background:#fff;
		border-radius:50%;
		-webkit-animation: planet 3s linear infinite;
        animation: planet 3s linear infinite;
		position: relative;
		top: 45px;
		left: 32px;
	}
	
	@-webkit-keyframes planet_holder {
	  0% {left:-10px;}
	  50% { left:10px}
	 100% {left:-10px;}
	}
    @keyframes planet_holder {
	  0% {left:-10px;}
	  50% { left:10px}
	 100% {left:-10px;}
	}
	
	@-webkit-keyframes planet {
	  from {
		-webkit-transform: 
		  rotate(0deg)
		  translate(50px)
		  rotate(0deg);
	  }
	  to {
		-webkit-transform: 
		  rotate(360deg)
		  translate(50px)
		  rotate(-360deg);
	  }
	}
    @keyframes planet {
	  from {
		transform: 
		  rotate(0deg)
		  translate(50px)
		  rotate(0deg);
	  }
	  to {
		transform: 
		  rotate(360deg)
		  translate(50px)
		  rotate(-360deg);
	  }
	}
	
.orbit2 {
    width: 55px; height: 80px;
    left: 10px; top: 10px;
    border-radius: 50%;
    border: 1px solid #FFF;
    position: absolute;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
	.planet_holder2 {
		width: 45px; height: 80px;
		position: relative;
		-webkit-animation: planet_holder2 2s linear infinite;
        animation: planet_holder2 2s linear infinite;
    }	
	.planet2 {
		width:10px; height:10px;
		background:#fff;
		border-radius:50%;
		-webkit-animation: planet2 2s linear infinite;
        animation: planet2 2s linear infinite;
		position: relative;
        top: 35px;
		left: 25px;
	}
	@-webkit-keyframes planet_holder2 {
	   0% {left:-15px;}
	  50% { left:10px}
	 100% {left:-15px;}
	}
    @keyframes planet_holder2 {
	   0% {left:-15px;}
	  50% { left:10px}
	 100% {left:-15px;}
	}
	
	@-webkit-keyframes planet2 {
	  from {
		-webkit-transform: 
		  rotate(0deg)
		  translate(40px)
		  rotate(0deg);
	  }
	  to {
		-webkit-transform: 
		  rotate(360deg)
		  translate(40px)
		  rotate(-360deg);
	  }
	}
    @keyframes planet2 {
	  from {
		  transform: 
		  rotate(0deg)
		  translate(40px)
		  rotate(0deg);
	  }
	  to {
		  transform: 
		  rotate(360deg)
		  translate(40px)
		  rotate(-360deg);
	  }
	}
    
    .orbit3 {
		width: 35px; height: 60px;
        left: 20px; top: 20px;
		border-radius: 50%;
		border: 1px solid #FFF;
		position: absolute;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
	}
	.planet_holder3 {
		width: 45px; height: 80px;
		position: relative;
		-webkit-animation: planet_holder3 1s linear infinite;
		animation: planet_holder3 1s linear infinite;

		}	
	.planet3 {
		width:10px; height:10px;
		background:#fff;
		border-radius:50%;
		-webkit-animation: planet3 1s linear infinite;
        animation: planet3 1s linear infinite;
		position: relative;
        top: 25px;
		left: 15px;
	}
    
	@-webkit-keyframes planet_holder3 {
	   0% {left:-15px;}
	  50% { left:10px}
	 100% {left:-15px;}
	}
    @keyframes planet_holder3 {
	   0% {left:-15px;}
	  50% { left:10px}
	 100% {left:-15px;}
	}
	
	@-webkit-keyframes planet3 {
	  from {
		-webkit-transform: 
		  rotate(0deg)
		  translate(30px)
		  rotate(0deg);
	  }
	  to {
		-webkit-transform: 
		  rotate(360deg)
		  translate(30px)
		  rotate(-360deg);
	  }
	}
    @keyframes planet3 {
	  from {
		  transform: 
		  rotate(0deg)
		  translate(30px)
		  rotate(0deg);
	  }
	  to {
		  transform: 
		  rotate(360deg)
		  translate(30px)
		  rotate(-360deg);
	  }
	}
    
    .sun {
	position:relative;
    left: 28px;
	top:40px;
	background:#fff;
	border-radius:50%;
	width:20px; height:20px;
	}
    
    
/* -------- worm -----------*/
    
.wormholder {
    margin: 40px auto;
    width: 120px;
    position: relative;
}
    
    .bubble.head {
        width: 30px; height: 30px;
        border: 1px solid #fff;
        border-radius: 50%;
        -webkit-animation: bubble_head 1s linear infinite;
        animation: bubble_head 1s linear infinite;
    }
        .eye {
            width: 5px; height: 8px;
            border: 1px solid #fff;
            border-radius: 50%;
            -webkit-animation: eyes 4s linear infinite;
            animation: eyes 4s linear infinite;
        }
        .eye_l {
            position: absolute;
            left: 5px; top: 7px;
        }
        .eye_r {
            position: absolute;
            left: 15px; top: 7px;
        }
            .dot{
                width: 3px;
                height: 4px;
                background: #fff;
                border-radius: 50%;
                top: 3px;
                position: relative;
            }
        .nose {
            position: absolute;
            left: 10px;
            top: 17px;
            width: 6px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
        }
        .mouth {
            position: absolute;
            left: 9px;
            top: 20px;
            width: 8px;
            height: 4px;
            border-radius: 50%;
            border: 1px solid transparent;
            border-bottom: 1px solid rgba(255,255,255,1);
        }
    
    .bubble {
        width: 25px; height: 20px;
        border: 1px solid #fff;
        border-radius: 50%;
        position: relative;
        
    }
        .bubble1 {
            border-top: 1px solid rgba(255,255,255,0);
            -webkit-animation: bubble1 1s linear infinite;
            animation: bubble1 1s linear infinite;
        }
        .bubble2 {
            border-top: 1px solid rgba(255,255,255,0);
            -webkit-animation: bubble2 1s linear infinite;
            animation: bubble2 1s linear infinite;
        }
        .bubble3 {
            
            border-top: 1px solid rgba(255,255,255,0);
            top: -37px; left: 27px;
            -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);

        }
        .bubble4 {
            border-top: 1px solid rgba(255,255,255,0);
            position: absolute;
            height: 17px;
            width: 25px;
            -webkit-animation: bubble4 1s linear infinite;
            animation: bubble4 1s linear infinite;
        }
        .bubble5 {
            border-left: 1px solid rgba(255,255,255,0);
            position: absolute;
            height: 25px; width: 19px;
            -webkit-animation: bubble5 1s linear infinite;
            animation: bubble5 1s linear infinite;
        }
        .bubble6 {
            border-left: 1px solid rgba(255,255,255,0);
            position: absolute;
            height: 25px; width: 17px;
            -webkit-animation: bubble6 1s linear infinite;
            animation: bubble6 1s linear infinite;
        }
        .bubble7 {
            border-left: 1px solid rgba(255,255,255,0);
            position: absolute;
            height: 25px;
            width: 18px;
            -webkit-animation: bubble7 1s linear infinite;
            animation: bubble7 1s linear infinite;
        }
        .bubble8 {
            border-left: 1px solid rgba(255,255,255,0);
            position: absolute;
            height: 25px;
            width: 19px;
            -webkit-animation: bubble8 1s linear infinite;
            animation: bubble8 1s linear infinite;
        }
    @-webkit-keyframes bubble_head {
        0%   {top: -3px; left: 9px;}
        50%  {top: -3px; left: 0px;}
        100% {top: -3px; left: 9px;}
    }
    @keyframes bubble_head {
        0%   {top: -3px; left: 9px;}
        50%  {top: -3px; left: 0px;}
        100% {top: -3px; left: 9px;}
    }
    
    @-webkit-keyframes eyes {
        0%  { background: transparent;}
        87% { background: transparent;}
        88% { background: #fff;}
        92% { background: transparent;}
    }
    @keyframes eyes {
        0%  { background: transparent;}
        87% { background: transparent;}
        88% { background: #fff;}
        92% { background: transparent;}
    }
    
    @-webkit-keyframes bubble1 {
        0%   {top: -10px; left: 11px;  -webkit-transform: rotate(0deg);}
        50%  {top: -10px; left: 7px;  -webkit-transform: rotate(-20deg);}
        100% {top: -10px; left: 11px; -webkit-transform: rotate(0deg);}
    }
    @keyframes bubble1 {
        0%   {top: -10px; left: 11px; transform: rotate(0deg);}
        50%  {top: -10px; left: 7px;  transform: rotate(-20deg);}
        100% {top: -10px; left: 11px; transform: rotate(0deg);}
    }
    @-webkit-keyframes bubble2 {
        0%   {top: -19px; left: 16px; -webkit-transform: rotate(-20deg);}
        50%  {top: -19px; left: 16px; -webkit-transform: rotate(-40deg);}
        100% {top: -19px; left: 16px; -webkit-transform: rotate(-20deg);}
    }
    @keyframes bubble2 {
        0%   {top: -19px; left: 16px; transform: rotate(-20deg);}
        50%  {top: -19px; left: 16px; transform: rotate(-40deg);}
        100% {top: -19px; left: 16px; transform: rotate(-20deg);}
    }
    @-webkit-keyframes bubble4 {
        0%   {top: 36px; left: 39px;  -webkit-transform: rotate(-96deg);}
        50%  {top: 40px; left: 41px;  -webkit-transform: rotate(-76deg);}
        100% {top: 36px;left: 39px; -webkit-transform: rotate(-96deg);}
    }
    @keyframes bubble4 {
        0%   {top: 36px; left: 39px;  transform: rotate(-96deg);}
        50%  {top: 40px; left: 41px; transform: rotate(-76deg);}
        100% {top: 36px;left: 39px; transform: rotate(-96deg);}
    }
     @-webkit-keyframes bubble5 {
        0%   {top: 28px;left: 53px; -webkit-transform: rotate(-9deg);}
        50%  {top: 40px;left: 57px; -webkit-transform: rotate(10deg);}
        100% {top: 28px;left: 53px; -webkit-transform: rotate(-9deg);}
    }
    @keyframes bubble5 {
        0%   {top: 28px;left: 53px; transform: rotate(-9deg);}
        50%  {top: 40px;left: 57px; transform: rotate(10deg);}
        100% {top: 28px;left: 53px; transform: rotate(-9deg);}
    }
    @-webkit-keyframes bubble6 {
        0%   {top: 34px;left: 65px; -webkit-transform: rotate(12deg);}
        50%  {top: 40px;left: 71px; -webkit-transform: rotate(0deg);}
        100% {top: 34px;left: 65px; -webkit-transform: rotate(12deg);}
    }
    @keyframes bubble6 {
        0% {top: 34px;left: 65px; transform: rotate(12deg);}
        50% {top: 40px;left: 71px; transform: rotate(0deg);}
        100% {top: 34px;left: 65px; transform: rotate(12deg);}
    }
    @-webkit-keyframes bubble7 {
        0%   {top: 39px;left: 76px; -webkit-transform: rotate(20deg);}
        50%  {top: 40px;left: 84px; -webkit-transform: rotate(0deg);}
        100% {top: 39px;left: 76px; -webkit-transform: rotate(20deg);}
    }
    @keyframes bubble7 {
        0%   {top: 39px;left: 76px; transform: rotate(20deg);}
        50%  {top: 40px;left: 84px; transform: rotate(0deg);}
        100% {top: 39px;left: 76px; transform: rotate(20deg);}
    }
    @-webkit-keyframes bubble8 {
        0%   {top: 39px;left: 89px; -webkit-transform: rotate(9deg);}
        50%  {top: 40px;left: 99px; -webkit-transform: rotate(0deg);}
        100% {top: 39px;left: 89px; -webkit-transform: rotate(9deg);}
    }
    @keyframes bubble8 {
        0%   {top: 39px;left: 89px; transform: rotate(9deg);}
        50%  {top: 40px;left: 99px; transform: rotate(0deg);}
        100% {top: 39px;left: 89px; transform: rotate(9deg);}
    }