Icon animation

In this example below you will see how to do a Icon animation with some HTML / CSS and Javascript

Using simple icons (courtesy of font awesome) and basic animations to inform interaction

Thumbnail
This awesome code was written by gooseofmusic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gooseofmusic ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Icon animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
	<header class="top">
		<h1>Icon animations!</h1>
		<p>Hover over the icons below to see their animations</p>
	</header>
	<h3>Single icons that have motion:</h3>
	<section class="single-icon">
		<i class="fa fa-arrow-right" aria-hidden="true"></i>
		<i class="fa fa-arrows-alt" aria-hidden="true"></i>
		<i class="fa fa-expand" aria-hidden="true"></i>
		<i class="fa fa-refresh" aria-hidden="true"></i>
		<i class="fa fa-heart" aria-hidden="true"></i>
		<i class="fa fa-undo" aria-hidden="true"></i>
		<i class="fa fa-italic" aria-hidden="true"></i>
		<i class="fa fa-cog" aria-hidden="true"></i>
		<i class="fa fa-wrench" aria-hidden="true"></i>
		<i class="fa fa-mouse-pointer" aria-hidden="true"></i>
		<i class="fa fa-magic" aria-hidden="true"></i>
		<i class="fa fa-lock" aria-hidden="true"></i>
		<i class="fa fa-unlock" aria-hidden="true"></i>
		<i class="fa fa-hourglass" aria-hidden="true"></i>
		<i class="fa fa-eraser" aria-hidden="true"></i>
		<i class="fa fa-rocket" aria-hidden="true"></i>
		<i class="fa fa-times" aria-hidden="true"></i>
	</section>
	<h3>Transitions using multiple icons:</h3>
	<section class="multi-icon">
		<div class="set battery-fill">
			<i class="fa fa-battery-empty" aria-hidden="true"></i>
			<i class="fa fa-battery-quarter" aria-hidden="true"></i>
			<i class="fa fa-battery-half" aria-hidden="true"></i>
			<i class="fa fa-battery-three-quarters" aria-hidden="true"></i>
			<i class="fa fa-battery-full" aria-hidden="true"></i>
		</div>
		<div class="set battery-drain">
			<i class="fa fa-battery-empty" aria-hidden="true"></i>
			<i class="fa fa-battery-quarter" aria-hidden="true"></i>
			<i class="fa fa-battery-half" aria-hidden="true"></i>
			<i class="fa fa-battery-three-quarters" aria-hidden="true"></i>
			<i class="fa fa-battery-full" aria-hidden="true"></i>
		</div>
		<div class="set circle">
			<i class="fa fa-circle-o" aria-hidden="true"></i>
			<i class="fa fa-circle" aria-hidden="true"></i>
		</div>
		<div class="set folder">
			<i class="fa fa-folder-o" aria-hidden="true"></i>
			<i class="fa fa-folder" aria-hidden="true"></i>
		</div>
		<div class="set heart">
			<i class="fa fa-heart-o" aria-hidden="true"></i>
			<i class="fa fa-heartbeat" aria-hidden="true"></i>
		</div>
		<div class="set dropper">
			<i class="fa fa-eyedropper" aria-hidden="true"></i>
			<i class="fa fa-tint" aria-hidden="true"></i>
		</div>
	</section>
	<footer>
		<p>Special thanks to <a href="http://fontawesome.io/"><i class="fa fa-font-awesome" aria-hidden="true"></i> Font Awesome</a> for the lovely icons</p>
	</footer>
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://use.fontawesome.com/bf7c42290d.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/gooseofmusic/icon-animation-ZpXQxO */
@import "https://fonts.googleapis.com/css?family=Montserrat";
* {
  box-sizing: border-box;
}

main {
  font-family: 'Montserrat', arial, sans-serif;
  margin: 0 auto;
  width: 1000px;
  max-width: 100%;
  padding: 1em;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
main .top {
  border-bottom: 4px solid #52A949;
}
main .top h1 {
  margin: 0;
}
main h3 {
  margin-bottom: 0;
}
main a {
  color: #00ade9;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.36, 0.07, 0.57, 0.99);
}
main section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: .5em 1em 1em;
  font-size: 2rem;
  border-bottom: 2px solid #52A949;
}
main section i {
  -webkit-transform: scale(1);
          transform: scale(1);
  display: block;
  margin: .25em .5em;
  transition: all 0.2s cubic-bezier(0.36, 0.07, 0.57, 0.99);
  color: #aaa;
}
main .single-icon i:hover {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  color: #1813e4;
}
main .multi-icon .set {
  position: relative;
  height: 40px;
  width: 60px;
}
main .multi-icon .set i {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
main .multi-icon .set i:first-of-type {
  opacity: 1;
}
main .multi-icon .set:hover i {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  color: #1813e4;
}

.fa-arrow-right:hover {
  -webkit-animation: arrow-right 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: arrow-right 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-arrows-alt:hover {
  -webkit-animation: arrows-alt 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: arrows-alt 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-expand:hover {
  -webkit-animation: expand 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: expand 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-refresh:hover {
  -webkit-animation: refresh 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: refresh 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-heart:hover {
  -webkit-animation: heart 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: heart 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-undo:hover {
  -webkit-animation: undo 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: undo 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-italic:hover {
  -webkit-animation: italic 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: italic 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-cog:hover {
  -webkit-animation: cog 5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: cog 5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-wrench:hover {
  -webkit-transform-origin: 79% 26%;
          transform-origin: 79% 26%;
  -webkit-animation: wrench 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: wrench 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-mouse-pointer:hover {
  -webkit-animation: mouse-pointer 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: mouse-pointer 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-magic:hover {
  -webkit-animation: magic 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: magic 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-lock:hover {
  -webkit-animation: lock 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: lock 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-unlock:hover {
  -webkit-transform-origin: 75% 25%;
          transform-origin: 75% 25%;
  -webkit-animation: unlock 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: unlock 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-hourglass:hover {
  -webkit-animation: hourglass 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: hourglass 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-eraser:hover {
  -webkit-animation: eraser 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: eraser 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-rocket:hover {
  -webkit-animation: rocket 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: rocket 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.fa-times:hover {
  -webkit-animation: times 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: times 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.battery-fill:hover .fa-battery-quarter {
  -webkit-animation: battery 2s 0.4s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s 0.4s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.battery-fill:hover .fa-battery-half {
  -webkit-animation: battery 2s 0.8s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s 0.8s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.battery-fill:hover .fa-battery-three-quarters {
  -webkit-animation: battery 2s 1.2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s 1.2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.battery-fill:hover .fa-battery-full {
  -webkit-animation: battery 2s 1.6s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s 1.6s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

.battery-drain:hover .fa-battery-quarter {
  -webkit-animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.battery-drain:hover .fa-battery-half {
  -webkit-animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.battery-drain:hover .fa-battery-three-quarters {
  -webkit-animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.battery-drain:hover .fa-battery-full {
  -webkit-animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
          animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

@-webkit-keyframes arrow-right {
  0% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  33% {
    -webkit-transform: scale(1.5) translateX(-5px);
            transform: scale(1.5) translateX(-5px);
  }
  66% {
    -webkit-transform: scale(1.5) translateX(5px);
            transform: scale(1.5) translateX(5px);
  }
  100% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
}

@keyframes arrow-right {
  0% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  33% {
    -webkit-transform: scale(1.5) translateX(-5px);
            transform: scale(1.5) translateX(-5px);
  }
  66% {
    -webkit-transform: scale(1.5) translateX(5px);
            transform: scale(1.5) translateX(5px);
  }
  100% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
}
@-webkit-keyframes arrows-alt {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  20% {
    -webkit-transform: scale(1.5) translate(-5px, 5px);
            transform: scale(1.5) translate(-5px, 5px);
  }
  40% {
    -webkit-transform: scale(1.5) translate(-5px, -5px);
            transform: scale(1.5) translate(-5px, -5px);
  }
  60% {
    -webkit-transform: scale(1.5) translate(5px, 5px);
            transform: scale(1.5) translate(5px, 5px);
  }
  80% {
    -webkit-transform: scale(1.5) translate(5px, -5px);
            transform: scale(1.5) translate(5px, -5px);
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
}
@keyframes arrows-alt {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  20% {
    -webkit-transform: scale(1.5) translate(-5px, 5px);
            transform: scale(1.5) translate(-5px, 5px);
  }
  40% {
    -webkit-transform: scale(1.5) translate(-5px, -5px);
            transform: scale(1.5) translate(-5px, -5px);
  }
  60% {
    -webkit-transform: scale(1.5) translate(5px, 5px);
            transform: scale(1.5) translate(5px, 5px);
  }
  80% {
    -webkit-transform: scale(1.5) translate(5px, -5px);
            transform: scale(1.5) translate(5px, -5px);
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
}
@-webkit-keyframes expand {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  25% {
    -webkit-transform: scale(1.5) translate(-5px, 5px);
            transform: scale(1.5) translate(-5px, 5px);
  }
  50% {
    -webkit-transform: scale(2) translate(0, 0);
            transform: scale(2) translate(0, 0);
  }
  75% {
    -webkit-transform: scale(1.5) translate(5px, -5px);
            transform: scale(1.5) translate(5px, -5px);
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
}
@keyframes expand {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  25% {
    -webkit-transform: scale(1.5) translate(-5px, 5px);
            transform: scale(1.5) translate(-5px, 5px);
  }
  50% {
    -webkit-transform: scale(2) translate(0, 0);
            transform: scale(2) translate(0, 0);
  }
  75% {
    -webkit-transform: scale(1.5) translate(5px, -5px);
            transform: scale(1.5) translate(5px, -5px);
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
}
@-webkit-keyframes refresh {
  from {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  to {
    -webkit-transform: scale(1.5) rotate(360deg);
            transform: scale(1.5) rotate(360deg);
  }
}
@keyframes refresh {
  from {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  to {
    -webkit-transform: scale(1.5) rotate(360deg);
            transform: scale(1.5) rotate(360deg);
  }
}
@-webkit-keyframes heart {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  20% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  30% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  40% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes heart {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  20% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  30% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  40% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@-webkit-keyframes undo {
  0% {
    -webkit-transform: scale(1.5) translateX(0) rotate(0);
            transform: scale(1.5) translateX(0) rotate(0);
  }
  33% {
    -webkit-transform: scale(1.5) translateX(10px) rotate(0);
            transform: scale(1.5) translateX(10px) rotate(0);
  }
  66% {
    -webkit-transform: scale(1.5) translateX(-10px) rotate(-360deg);
            transform: scale(1.5) translateX(-10px) rotate(-360deg);
  }
  100% {
    -webkit-transform: scale(1.5) translateX(0) rotate(-360deg);
            transform: scale(1.5) translateX(0) rotate(-360deg);
  }
}
@keyframes undo {
  0% {
    -webkit-transform: scale(1.5) translateX(0) rotate(0);
            transform: scale(1.5) translateX(0) rotate(0);
  }
  33% {
    -webkit-transform: scale(1.5) translateX(10px) rotate(0);
            transform: scale(1.5) translateX(10px) rotate(0);
  }
  66% {
    -webkit-transform: scale(1.5) translateX(-10px) rotate(-360deg);
            transform: scale(1.5) translateX(-10px) rotate(-360deg);
  }
  100% {
    -webkit-transform: scale(1.5) translateX(0) rotate(-360deg);
            transform: scale(1.5) translateX(0) rotate(-360deg);
  }
}
@-webkit-keyframes italic {
  0% {
    -webkit-transform: scale(1.5) skewX(0);
            transform: scale(1.5) skewX(0);
  }
  50% {
    -webkit-transform: scale(1.5) skewX(12deg);
            transform: scale(1.5) skewX(12deg);
  }
  100% {
    -webkit-transform: scale(1.5) skewX(0);
            transform: scale(1.5) skewX(0);
  }
}
@keyframes italic {
  0% {
    -webkit-transform: scale(1.5) skewX(0);
            transform: scale(1.5) skewX(0);
  }
  50% {
    -webkit-transform: scale(1.5) skewX(12deg);
            transform: scale(1.5) skewX(12deg);
  }
  100% {
    -webkit-transform: scale(1.5) skewX(0);
            transform: scale(1.5) skewX(0);
  }
}
@-webkit-keyframes cog {
  0% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  10% {
    -webkit-transform: scale(1.5) rotate(45deg);
            transform: scale(1.5) rotate(45deg);
  }
  17% {
    -webkit-transform: scale(1.5) rotate(45deg);
            transform: scale(1.5) rotate(45deg);
  }
  20% {
    -webkit-transform: scale(1.5) rotate(90deg);
            transform: scale(1.5) rotate(90deg);
  }
  27% {
    -webkit-transform: scale(1.5) rotate(90deg);
            transform: scale(1.5) rotate(90deg);
  }
  30% {
    -webkit-transform: scale(1.5) rotate(135deg);
            transform: scale(1.5) rotate(135deg);
  }
  37% {
    -webkit-transform: scale(1.5) rotate(135deg);
            transform: scale(1.5) rotate(135deg);
  }
  40% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  47% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  50% {
    -webkit-transform: scale(1.5) rotate(225deg);
            transform: scale(1.5) rotate(225deg);
  }
  57% {
    -webkit-transform: scale(1.5) rotate(225deg);
            transform: scale(1.5) rotate(225deg);
  }
  60% {
    -webkit-transform: scale(1.5) rotate(270deg);
            transform: scale(1.5) rotate(270deg);
  }
  67% {
    -webkit-transform: scale(1.5) rotate(270deg);
            transform: scale(1.5) rotate(270deg);
  }
  70% {
    -webkit-transform: scale(1.5) rotate(315deg);
            transform: scale(1.5) rotate(315deg);
  }
  77% {
    -webkit-transform: scale(1.5) rotate(315deg);
            transform: scale(1.5) rotate(315deg);
  }
  80% {
    -webkit-transform: scale(1.5) rotate(360deg);
            transform: scale(1.5) rotate(360deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(360deg);
            transform: scale(1.5) rotate(360deg);
  }
}
@keyframes cog {
  0% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  10% {
    -webkit-transform: scale(1.5) rotate(45deg);
            transform: scale(1.5) rotate(45deg);
  }
  17% {
    -webkit-transform: scale(1.5) rotate(45deg);
            transform: scale(1.5) rotate(45deg);
  }
  20% {
    -webkit-transform: scale(1.5) rotate(90deg);
            transform: scale(1.5) rotate(90deg);
  }
  27% {
    -webkit-transform: scale(1.5) rotate(90deg);
            transform: scale(1.5) rotate(90deg);
  }
  30% {
    -webkit-transform: scale(1.5) rotate(135deg);
            transform: scale(1.5) rotate(135deg);
  }
  37% {
    -webkit-transform: scale(1.5) rotate(135deg);
            transform: scale(1.5) rotate(135deg);
  }
  40% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  47% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  50% {
    -webkit-transform: scale(1.5) rotate(225deg);
            transform: scale(1.5) rotate(225deg);
  }
  57% {
    -webkit-transform: scale(1.5) rotate(225deg);
            transform: scale(1.5) rotate(225deg);
  }
  60% {
    -webkit-transform: scale(1.5) rotate(270deg);
            transform: scale(1.5) rotate(270deg);
  }
  67% {
    -webkit-transform: scale(1.5) rotate(270deg);
            transform: scale(1.5) rotate(270deg);
  }
  70% {
    -webkit-transform: scale(1.5) rotate(315deg);
            transform: scale(1.5) rotate(315deg);
  }
  77% {
    -webkit-transform: scale(1.5) rotate(315deg);
            transform: scale(1.5) rotate(315deg);
  }
  80% {
    -webkit-transform: scale(1.5) rotate(360deg);
            transform: scale(1.5) rotate(360deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(360deg);
            transform: scale(1.5) rotate(360deg);
  }
}
@-webkit-keyframes wrench {
  0% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  20% {
    -webkit-transform: scale(1.5) rotate(30deg);
            transform: scale(1.5) rotate(30deg);
  }
  30% {
    -webkit-transform: scale(1.5) rotate(-20deg);
            transform: scale(1.5) rotate(-20deg);
  }
  50% {
    -webkit-transform: scale(1.5) rotate(30deg);
            transform: scale(1.5) rotate(30deg);
  }
  60% {
    -webkit-transform: scale(1.5) rotate(-20deg);
            transform: scale(1.5) rotate(-20deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
}
@keyframes wrench {
  0% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  20% {
    -webkit-transform: scale(1.5) rotate(30deg);
            transform: scale(1.5) rotate(30deg);
  }
  30% {
    -webkit-transform: scale(1.5) rotate(-20deg);
            transform: scale(1.5) rotate(-20deg);
  }
  50% {
    -webkit-transform: scale(1.5) rotate(30deg);
            transform: scale(1.5) rotate(30deg);
  }
  60% {
    -webkit-transform: scale(1.5) rotate(-20deg);
            transform: scale(1.5) rotate(-20deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
}
@-webkit-keyframes mouse-pointer {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  20% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  22.5% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  32.5% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  35% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes mouse-pointer {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  20% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  22.5% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  32.5% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  35% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@-webkit-keyframes magic {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0) rotate(0);
            transform: scale(1.5) translate(0, 0) rotate(0);
  }
  10% {
    -webkit-transform: scale(1.5) translate(-5px, 2.5px) rotate(-10deg);
            transform: scale(1.5) translate(-5px, 2.5px) rotate(-10deg);
  }
  20% {
    -webkit-transform: scale(1.5) translate(-10px, 0) rotate(-20deg);
            transform: scale(1.5) translate(-10px, 0) rotate(-20deg);
  }
  30% {
    -webkit-transform: scale(1.5) translate(-5px, -2.5px) rotate(-30deg);
            transform: scale(1.5) translate(-5px, -2.5px) rotate(-30deg);
  }
  40% {
    -webkit-transform: scale(1.5) translate(0, 0) rotate(-20deg);
            transform: scale(1.5) translate(0, 0) rotate(-20deg);
  }
  50% {
    -webkit-transform: scale(1.5) translate(5px, 2.5px) rotate(-10deg);
            transform: scale(1.5) translate(5px, 2.5px) rotate(-10deg);
  }
  60% {
    -webkit-transform: scale(1.5) translate(10px, 0) rotate(0);
            transform: scale(1.5) translate(10px, 0) rotate(0);
  }
  70% {
    -webkit-transform: scale(1.5) translate(5px, -2.5px) rotate(10deg);
            transform: scale(1.5) translate(5px, -2.5px) rotate(10deg);
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0) rotate(0);
            transform: scale(1.5) translate(0, 0) rotate(0);
  }
}
@keyframes magic {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0) rotate(0);
            transform: scale(1.5) translate(0, 0) rotate(0);
  }
  10% {
    -webkit-transform: scale(1.5) translate(-5px, 2.5px) rotate(-10deg);
            transform: scale(1.5) translate(-5px, 2.5px) rotate(-10deg);
  }
  20% {
    -webkit-transform: scale(1.5) translate(-10px, 0) rotate(-20deg);
            transform: scale(1.5) translate(-10px, 0) rotate(-20deg);
  }
  30% {
    -webkit-transform: scale(1.5) translate(-5px, -2.5px) rotate(-30deg);
            transform: scale(1.5) translate(-5px, -2.5px) rotate(-30deg);
  }
  40% {
    -webkit-transform: scale(1.5) translate(0, 0) rotate(-20deg);
            transform: scale(1.5) translate(0, 0) rotate(-20deg);
  }
  50% {
    -webkit-transform: scale(1.5) translate(5px, 2.5px) rotate(-10deg);
            transform: scale(1.5) translate(5px, 2.5px) rotate(-10deg);
  }
  60% {
    -webkit-transform: scale(1.5) translate(10px, 0) rotate(0);
            transform: scale(1.5) translate(10px, 0) rotate(0);
  }
  70% {
    -webkit-transform: scale(1.5) translate(5px, -2.5px) rotate(10deg);
            transform: scale(1.5) translate(5px, -2.5px) rotate(10deg);
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0) rotate(0);
            transform: scale(1.5) translate(0, 0) rotate(0);
  }
}
@-webkit-keyframes lock {
  0% {
    -webkit-transform: scale(1.5) translateY(0);
            transform: scale(1.5) translateY(0);
  }
  20% {
    -webkit-transform: scale(1.5) translateY(-5px);
            transform: scale(1.5) translateY(-5px);
  }
  30% {
    -webkit-transform: scale(1.5) translateY(5px);
            transform: scale(1.5) translateY(5px);
  }
  50% {
    -webkit-transform: scale(1.5) translateY(-5px);
            transform: scale(1.5) translateY(-5px);
  }
  60% {
    -webkit-transform: scale(1.5) translateY(5px);
            transform: scale(1.5) translateY(5px);
  }
  100% {
    -webkit-transform: scale(1.5) translateY(0);
            transform: scale(1.5) translateY(0);
  }
}
@keyframes lock {
  0% {
    -webkit-transform: scale(1.5) translateY(0);
            transform: scale(1.5) translateY(0);
  }
  20% {
    -webkit-transform: scale(1.5) translateY(-5px);
            transform: scale(1.5) translateY(-5px);
  }
  30% {
    -webkit-transform: scale(1.5) translateY(5px);
            transform: scale(1.5) translateY(5px);
  }
  50% {
    -webkit-transform: scale(1.5) translateY(-5px);
            transform: scale(1.5) translateY(-5px);
  }
  60% {
    -webkit-transform: scale(1.5) translateY(5px);
            transform: scale(1.5) translateY(5px);
  }
  100% {
    -webkit-transform: scale(1.5) translateY(0);
            transform: scale(1.5) translateY(0);
  }
}
@-webkit-keyframes unlock {
  0% {
    -webkit-transform: scale(1.5) rotate(-15deg);
            transform: scale(1.5) rotate(-15deg);
  }
  15% {
    -webkit-transform: scale(1.5) rotate(-40deg);
            transform: scale(1.5) rotate(-40deg);
  }
  30% {
    -webkit-transform: scale(1.5) rotate(5deg);
            transform: scale(1.5) rotate(5deg);
  }
  45% {
    -webkit-transform: scale(1.5) rotate(-30deg);
            transform: scale(1.5) rotate(-30deg);
  }
  60% {
    -webkit-transform: scale(1.5) rotate(-5deg);
            transform: scale(1.5) rotate(-5deg);
  }
  75% {
    -webkit-transform: scale(1.5) rotate(-20deg);
            transform: scale(1.5) rotate(-20deg);
  }
  90% {
    -webkit-transform: scale(1.5) rotate(-15deg);
            transform: scale(1.5) rotate(-15deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(-15deg);
            transform: scale(1.5) rotate(-15deg);
  }
}
@keyframes unlock {
  0% {
    -webkit-transform: scale(1.5) rotate(-15deg);
            transform: scale(1.5) rotate(-15deg);
  }
  15% {
    -webkit-transform: scale(1.5) rotate(-40deg);
            transform: scale(1.5) rotate(-40deg);
  }
  30% {
    -webkit-transform: scale(1.5) rotate(5deg);
            transform: scale(1.5) rotate(5deg);
  }
  45% {
    -webkit-transform: scale(1.5) rotate(-30deg);
            transform: scale(1.5) rotate(-30deg);
  }
  60% {
    -webkit-transform: scale(1.5) rotate(-5deg);
            transform: scale(1.5) rotate(-5deg);
  }
  75% {
    -webkit-transform: scale(1.5) rotate(-20deg);
            transform: scale(1.5) rotate(-20deg);
  }
  90% {
    -webkit-transform: scale(1.5) rotate(-15deg);
            transform: scale(1.5) rotate(-15deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(-15deg);
            transform: scale(1.5) rotate(-15deg);
  }
}
@-webkit-keyframes hourglass {
  0% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  35% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  65% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
}
@keyframes hourglass {
  0% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
  35% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  65% {
    -webkit-transform: scale(1.5) rotate(180deg);
            transform: scale(1.5) rotate(180deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotate(0);
            transform: scale(1.5) rotate(0);
  }
}
@-webkit-keyframes eraser {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  15% {
    -webkit-transform: scale(1.5) translate(-10px, -5px);
            transform: scale(1.5) translate(-10px, -5px);
  }
  30% {
    -webkit-transform: scale(1.5) translate(-10px, 5px);
            transform: scale(1.5) translate(-10px, 5px);
  }
  45% {
    -webkit-transform: scale(1.5) translate(-5px, -5px);
            transform: scale(1.5) translate(-5px, -5px);
  }
  60% {
    -webkit-transform: scale(1.5) translate(-5px, 5px);
            transform: scale(1.5) translate(-5px, 5px);
  }
  75% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  100% {
    -webkit-transform: scale(1.5) translate(10px, 0);
            transform: scale(1.5) translate(10px, 0);
  }
}
@keyframes eraser {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  15% {
    -webkit-transform: scale(1.5) translate(-10px, -5px);
            transform: scale(1.5) translate(-10px, -5px);
  }
  30% {
    -webkit-transform: scale(1.5) translate(-10px, 5px);
            transform: scale(1.5) translate(-10px, 5px);
  }
  45% {
    -webkit-transform: scale(1.5) translate(-5px, -5px);
            transform: scale(1.5) translate(-5px, -5px);
  }
  60% {
    -webkit-transform: scale(1.5) translate(-5px, 5px);
            transform: scale(1.5) translate(-5px, 5px);
  }
  75% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
  }
  100% {
    -webkit-transform: scale(1.5) translate(10px, 0);
            transform: scale(1.5) translate(10px, 0);
  }
}
@-webkit-keyframes rocket {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
    opacity: 1;
  }
  5% {
    -webkit-transform: scale(1.5) translate(2px, 0);
            transform: scale(1.5) translate(2px, 0);
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(1.5) translate(1px, -2px);
            transform: scale(1.5) translate(1px, -2px);
    opacity: 1;
  }
  15% {
    -webkit-transform: scale(1.5) translate(3px, -1px);
            transform: scale(1.5) translate(3px, -1px);
    opacity: 1;
  }
  20% {
    -webkit-transform: scale(1.5) translate(2px, -3px);
            transform: scale(1.5) translate(2px, -3px);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(1.5) translate(4px, -2px);
            transform: scale(1.5) translate(4px, -2px);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.5) translate(10px, -10px);
            transform: scale(1.5) translate(10px, -10px);
    opacity: 0;
  }
  51% {
    -webkit-transform: scale(1.5) translate(-10px, 10px);
            transform: scale(1.5) translate(-10px, 10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
    opacity: 1;
  }
}
@keyframes rocket {
  0% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
    opacity: 1;
  }
  5% {
    -webkit-transform: scale(1.5) translate(2px, 0);
            transform: scale(1.5) translate(2px, 0);
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(1.5) translate(1px, -2px);
            transform: scale(1.5) translate(1px, -2px);
    opacity: 1;
  }
  15% {
    -webkit-transform: scale(1.5) translate(3px, -1px);
            transform: scale(1.5) translate(3px, -1px);
    opacity: 1;
  }
  20% {
    -webkit-transform: scale(1.5) translate(2px, -3px);
            transform: scale(1.5) translate(2px, -3px);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(1.5) translate(4px, -2px);
            transform: scale(1.5) translate(4px, -2px);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.5) translate(10px, -10px);
            transform: scale(1.5) translate(10px, -10px);
    opacity: 0;
  }
  51% {
    -webkit-transform: scale(1.5) translate(-10px, 10px);
            transform: scale(1.5) translate(-10px, 10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.5) translate(0, 0);
            transform: scale(1.5) translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes times {
  0% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  15% {
    -webkit-transform: scale(1.5) translateX(5px);
            transform: scale(1.5) translateX(5px);
  }
  30% {
    -webkit-transform: scale(1.5) translateX(-5px);
            transform: scale(1.5) translateX(-5px);
  }
  45% {
    -webkit-transform: scale(1.5) translateX(3px);
            transform: scale(1.5) translateX(3px);
  }
  60% {
    -webkit-transform: scale(1.5) translateX(-3px);
            transform: scale(1.5) translateX(-3px);
  }
  75% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
}
@keyframes times {
  0% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  15% {
    -webkit-transform: scale(1.5) translateX(5px);
            transform: scale(1.5) translateX(5px);
  }
  30% {
    -webkit-transform: scale(1.5) translateX(-5px);
            transform: scale(1.5) translateX(-5px);
  }
  45% {
    -webkit-transform: scale(1.5) translateX(3px);
            transform: scale(1.5) translateX(3px);
  }
  60% {
    -webkit-transform: scale(1.5) translateX(-3px);
            transform: scale(1.5) translateX(-3px);
  }
  75% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
}
@-webkit-keyframes battery {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes battery {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Comments