<style>
.animation {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  float: left;
  width:349px;
  height: 60px;
  border-radius: 0.3em;
}
.anim1 {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 100%;
}
.anim1:before {
  width: 2px;
  display: block;
  position: absolute;
  left: 11px;
  top: 2px;
  height: 10px;
  background-color: #ccc;
  -webkit-animation: anim1 3s linear infinite;
          animation: anim1 3s linear infinite;
  content: "";
  -webkit-transform-origin: 1px 10px;
          transform-origin: 1px 10px;
}
.anim1:after {
  width: 2px;
  display: block;
  position: absolute;
  left: 11px;
  top: 3px;
  height: 9px;
  background-color: #ccc;
  -webkit-animation: anim1 18s linear infinite;
          animation: anim1 18s linear infinite;
  content: "";
  -webkit-transform-origin: 1px 9px;
          transform-origin: 1px 9px;
}
@-webkit-keyframes anim1 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes anim1 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.anim2 {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 100%;
}
.anim2:before,
.anim2:after {
  width: 2px;
  display: block;
  position: absolute;
  left: 11px;
  top: 2px;
  height: 20px;
  background-color: #ccc;
  -webkit-animation: anim2 3s linear infinite;
          animation: anim2 3s linear infinite;
  content: "";
  -webkit-transform-origin: 1px 10px;
          transform-origin: 1px 10px;
}
.anim2:after {
  -webkit-animation: anim2 3s linear -0.75s infinite;
          animation: anim2 3s linear -0.75s infinite;
}
@-webkit-keyframes anim2 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes anim2 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.anim3:before {
  display: block;
  width: 24px;
  height: 24px;
  margin-top: -5px;
  border: 2px solid #000;
  content: "";
  -webkit-animation: anim3 0.5s ease infinite alternate;
          animation: anim3 0.5s ease infinite alternate;
  border-radius: 100% 100% 0 100%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.anim3.subway:before {
  display: block;
  width: 40px;
  height: 40px;
  margin-top: -5px;
  border: 5px solid #fff;
  content: "";
  -webkit-animation: anim3 0.5s ease infinite alternate;
          animation: anim3 0.5s ease infinite alternate;
  border-radius: 100% 100% 0 100%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.anim3:after {
  display: block;
  width: 28px;
  height: 8px;
  margin-top: 8px;
  background-color: #ccc;
  content: "";
  border-radius: 100%;
}
.anim3.subway:after {
    display: block;
    width: 40px;
    height: 8px;
    margin-top: 12px;
    margin-left: 5px;
    background-color: #d2d2d2;
    content: "";
    border-radius: 100%;
}
@-webkit-keyframes anim3 {
  to {
    -webkit-transform: rotate(45deg) translate(3px, 3px);
            transform: rotate(45deg) translate(3px, 3px);
  }
}
@keyframes anim3 {
  to {
    -webkit-transform: rotate(45deg) translate(3px, 3px);
            transform: rotate(45deg) translate(3px, 3px);
  }
}
.anim4 {
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 100%;
}
.anim4:before {
  display: block;
  width: 8px;
  height: 8px;
  margin: -2px -2px 0 0;
  background-color: #ccc;
  content: "";
  -webkit-animation: anim4 1s linear infinite;
          animation: anim4 1s linear infinite;
  border-radius: 100%;
  -webkit-transform-origin: 12px 14px;
          transform-origin: 12px 14px;
}
@-webkit-keyframes anim4 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes anim4 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.anim5 {
  width: 24px;
  height: 24px;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #222;
  border-left: 2px solid #222;
  -webkit-animation: anim5 0.75s ease infinite;
          animation: anim5 0.75s ease infinite;
  border-radius: 100%;
}
@-webkit-keyframes anim5 {
  to {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@keyframes anim5 {
  to {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
.anim6 {
  width: 16px;
  height: 16px;
  background-color: #ccc;
  -webkit-animation: anim6 1.5s ease infinite;
          animation: anim6 1.5s ease infinite;
  border-radius: 100%;
}
@-webkit-keyframes anim6 {
  to {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
@keyframes anim6 {
  to {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
.anim7 {
  width: 24px;
  height: 24px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #222;
  -webkit-animation: anim7 1s ease infinite;
          animation: anim7 1s ease infinite;
  border-radius: 100%;
}
@-webkit-keyframes anim7 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes anim7 {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.anim8,
.anim8:before,
.anim8:after,
.anim8:before:after {
  position: relative;
  width: 6px;
  height: 6px;
  background: #ccc;
  content: "";
  -webkit-animation: anim8 1s ease -0.25s infinite alternate;
          animation: anim8 1s ease -0.25s infinite alternate;
  border-radius: 100%;
}
.anim8:before,
.anim8:before:before,
.anim8:after:before,
.anim8:before:after:before {
  position: absolute;
  left: -12px;
  -webkit-animation: anim8 1s ease -0.5s infinite alternate;
          animation: anim8 1s ease -0.5s infinite alternate;
}
.anim8:after,
.anim8:before:after,
.anim8:after:after,
.anim8:before:after:after {
  position: absolute;
  left: 12px;
  -webkit-animation: anim8 1s ease infinite alternate;
          animation: anim8 1s ease infinite alternate;
}
@-webkit-keyframes anim8 {
  to {
    background: #333;
  }
}
@keyframes anim8 {
  to {
    background: #333;
  }
}
.anim9 {
  width: 24px;
  height: 2px;
  background: -webkit-linear-gradient(left, #ccc, #ccc 30%, #333 10%);
  background: linear-gradient(to right, #ccc, #ccc 30%, #333 10%);
  -webkit-animation: anim9 1s linear infinite;
          animation: anim9 1s linear infinite;
}
@-webkit-keyframes anim9 {
  to {
    background-position: 24px 0;
  }
}
@keyframes anim9 {
  to {
    background-position: 24px 0;
  }
}

@-webkit-keyframes click {
    to {
         -webkit-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
	}
}
@keyframes click {
    to {
        -webkit-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
	}
}


@-webkit-keyframes slideLeftToRight {
    from{
     	-webkit-transform: translate(0,0);
        transform: translate(0,0);
         
	}
    to {
       -webkit-transform: translate(100%,0);
        transform: translate(100%,0);
        
	}
}
@keyframes slideLeftToRight
{
	 from{
     	-webkit-transform: translate(0,0);
        transform: translate(0,0);
         
	}
    to {
       -webkit-transform: translate(100%,0);
        transform: translate(100%,0);
        
	}
}
@-webkit-keyframes slideRigtToLeft {
    from{
     	-webkit-transform: translate(100%,0);
        transform: translate(100%,0);
         
	}
    to {
       -webkit-transform: translate(0,0);
        transform: translate(0,0);
        
	}
}
@keyframes slideRigtToLeft
{
	from{
		-webkit-transform: translate(100%,0);
        transform: translate(100%,0);
         
	}
    to {
       -webkit-transform: translate(0,0);
        transform: translate(0,0);
         
	}
}
</style>