Hot hot

Fontawesome animations that make sense!

by Andy Challis

HTML

<div class="thermometer"></div>

CSS

@-webkit-keyframes changeTemp {
  0% {
    content: "\f2cb";
  }
  25% {
    content: "\f2ca";
  }
  50% {
    content: "\f2c9";
  }
  75% {
    content: "\f2c8";
  }
  100% {
    content: "\f2c7";
  }
}

@keyframes changeTemp {
  0% {
    content: "\f2cb";
  }
  25% {
    content: "\f2ca";
  }
  50% {
    content: "\f2c9";
  }
  75% {
    content: "\f2c8";
  }
  100% {
    content: "\f2c7";
  }
}

.thermometer:before,
.thermometer {
  content: "\f2cb";
  font-size: 80px;
  font-family: Fontawesome;
}

.thermometer:hover:before {
  content: "\f2cb";
  -webkit-animation: changeTemp 3s;
  animation: changeTemp 3s;
  -moz-animation: changeTemp 3s;
  font-size: 80px;
  font-family: Fontawesome;
}