css potato emoji

css potato emoji.markdown

css potato emoji

Pure CSS3 animated emoji. Good for understanding the box model. I call them potatoes and I plan to make 20 of them. Shoot me an email if you have any ideas about them:) hkjpotato@gmail.com

A Pen by Kaijie Huang on CodePen.

License.

index.html

<meta charset="utf-8">
<h2>100 CSS Potatoes Project by KJ
</h2>
<h3>Now <span>0</span> Potatoes</h3>
<a class="link" href="http://codepen.io/hkjpotato/full/JKvrob/" target="_blank">trigger all version</a>
<div class="collection">
	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>


	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="ears">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="hat"></div>
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	  <div class="smoke">
	  </div>
	</div>

	<div class="face">
	  <div class="robot-eye"></div>
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="ears">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="nose"></div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <!-- using div's inside a's is semantically correct in HTML5. -->
	  <a href="https://github.com/hkjpotato/frontend101#css" target="_blank"/>
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	  </a>
	</div>


	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="moustache">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="ears">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>
	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>

	<div class="face">
	  <div class="headset">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="glasses">
	    <span class="left"></span>
	    <span class="right"></span>
	  </div>
	  <div class="mouth">
	  </div>
	</div>
</div>

script.js

//only used to update the number
document.querySelector("h3>span").innerHTML = document.querySelectorAll(".face").length;
// Pure CSS3 animated emoji. 
// Good for understanding the css box model. 
// I planned to make 100 of them, but it seems 20 is more reasonable.
// Shoot me an email if you have any ideas about them:) 
//hkjpotato@gmail.com

style.css

body {
  max-width: 453px;
  margin: auto;
}
a { color: inherit; } 
h2,h3 {
  text-align: center;
  text-transform: uppercase;
  font-family:sans-serif;
}
.link {
  margin: -10px auto 20px;
  font-size: 12px;
  color: orange;
  font-family:sans-serif;
  text-align: center;
  display: block;
}
h2 {
  margin-top: 0;
}
h3 {
  color: lightgrey;
  font-weight: 400;
  margin-top: -10px;
}
h3>span {
  color: red;
}
.face {
  background-color: white;
  cursor: crosshair;
   /*margin: 20px 50px; */
  margin: 10px 5px;
  margin: 10px 10px;
  float: left;
  width: 50px;
  height: 60px;
  border: 2px solid black;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.face>* {
  pointer-events: none;
}
.face>a {
  pointer-events: auto;
}
.glasses {
  position: relative;
  width: 50px;
  height: 20px;
  left: 50%;
  margin-left: -25px;
  margin-top: 20px;
}

.glasses>span{
  display: inline-block;
  position: absolute;
  border-radius: 3px;
  border: 2px solid black;
  width: 20px;
  height: 17px;
  background-color: white;
}
.glasses>span:before{
  content: ".";
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 40px;
  margin-top: -25px;
  text-indent: -10px;
  transition: text-indent .25s;
}
.glasses>.left {
  left: 0;
}
.glasses>.right {
  right: 0;
}
.mouth {
  width: 12px;
  height: 0px;
  border: 1px solid black;
  margin: 10px auto;
  background: white;
  transition: .25s;
}
/* first */
.collection>:nth-child(1):hover
.glasses>span:before {
  text-indent: 0px;
}
.collection>:nth-child(1):hover
.mouth {
  transform: rotate(-30deg);
  transform-origin: 50% -250%;
}
/* second */
.collection>:nth-child(2):hover
.glasses>span:before {
  content: "T";
  text-indent: 0px;
  font-size: 20px;
  margin-top: 0px;
  font-family:sans-serif;
}
.collection>:nth-child(2):hover
.mouth {
  height: 12px;
  margin-top: 3px;
  border: 2px solid black;
}
/* third */
.collection>:nth-child(3):hover
.glasses>span:before {
  content: "^";
  text-indent: 0px;
  font-size: 20px;
  margin-top: 0px;
  font-family:sans-serif;
}
.collection>:nth-child(3):hover
.mouth {
  width: 20px;
  height: 10px;
  margin-top: 3px;
  border: 2px solid black;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
/* forth */
.collection>:nth-child(4):hover
.glasses>span:before {
  content: "$";
  text-indent: 0px;
  font-size: 20px;
  margin-top: -2px;
  font-family:sans-serif;
}
.collection>:nth-child(4):hover
.mouth {
  width: 10px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid black;
  border-radius: 20px;
}
/* fifth */
.collection>:nth-child(5):hover
.glasses>span:before {
  content: "@";
  text-indent: 0px;
  font-size: 20px;
  margin-top: -2px;
  font-family:sans-serif;
}
.collection>:nth-child(5):hover
.mouth {
  width: 1px;
}
/* sixth */
.collection>:nth-child(6):hover
.glasses>span:before {
  content: "??";
  text-indent: -2px;
  font-size: 20px;
  margin-top: -2px;
  font-family:sans-serif;
}
.collection>:nth-child(6):hover
.mouth {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border: 2px solid black;
  border-radius: 10px;
  
}

/* seventh */
.collection>:nth-child(7)
.glasses>span {
  background-color: black;
}
/* -- */
.collection>:nth-child(7):hover
.glasses>span:before {
  content: "/";
  text-indent: -2px;
  font-size: 20px;
  margin-top: -2px;
  color: white;
  font-family:sans-serif;
}
.collection>:nth-child(7):hover
.mouth {
  transform: rotate(-30deg);
  transform-origin: 50% -200%;
}

/* eighth */
.collection>:nth-child(8)
.glasses>span {
  transition: .25s;
}
.collection>:nth-child(8)
.mouth:before {
  content: "x";
  font-family:sans-serif;
  transition: .25s;
  opacity: 0;
  position: absolute;
  margin-top: -12px;
  margin-left: 10px;
}
/* -- */
.collection>:nth-child(8):hover
.glasses>span {
  background-color: black;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.collection>:nth-child(8):hover
.mouth {
  width: 5px;
}
.collection>:nth-child(8):hover
.mouth:before {
  opacity: 1;
  transform: rotate(-30deg);
}

/* ninth */
.collection>:nth-child(9) {
  transition: .25s;
  position: relative;
}
.collection>:nth-child(9)
.ears {
  position: absolute;
  width: 60px;
  height: 20px;
  margin-left: 50%;
  left: -30px;
  margin-top: -5px;
  margin-bottom: -15px;
  z-index: -1;
  opacity: 0;
  transition: .25s;
}
.collection>:nth-child(9)
.ears>span{
  display: inline-block;
  position: absolute;
  border-radius: 25px;
  width: 25px;
  height: 25px;
  background-color: black;
}
.collection>:nth-child(9)
.glasses>span {
  background-color: black;
  border-radius: 20px;
  height: 20px;
}
.collection>:nth-child(9)
.ears>.left {
  left: 0;
}
.collection>:nth-child(9)
.ears>.right {
  right: 0;
}
/* -- */
.collection>:nth-child(9):hover {
  border-radius: 25px;
}
.collection>:nth-child(9):hover
.ears {
  opacity: 1;
}
.collection>:nth-child(9):hover
.glasses>span:before {
  content: "o";
  text-indent: -2px;
  font-size: 20px;
  margin-top: -2px;
  color: white;
  font-family:sans-serif;
}
.collection>:nth-child(9):hover
.mouth {
  margin-top: 4px;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  border-bottom: 3px solid black;
}


/* tenth */
.collection>:nth-child(10) {
  position: relative;
}
.collection>:nth-child(10)
.glasses>span {
  transition: .25s;
}
.collection>:nth-child(10):after {
  content: "";
  display: block;
  transition: .25s;
  opacity: 0;
  width: 60px;
  height: 30px;
  background-color: black;
  position: relative;
  margin-top: -65px;
  margin-left: -30px;
  left: 50%;
  z-index: -1;
  border-top-left-radius:  25px;
  border-top-right-radius:  25px;
  transition: .25s;
}
.collection>:nth-child(10):before {
  content: "";
  display: inline-block;
  transition: .25s;
  opacity: 0;
  width: 50px;
  height: 15px;
  background-color: black;
  position: absolute;
  margin-left: -25px;
  left: 50%;
  z-index: 1;
  border-top-left-radius:  25px;
  border-top-right-radius:  25px;
  transition: .25s;
}
/* -- */
.collection>:nth-child(10):hover {
  border-bottom-left-radius:  30px 40px;
  border-bottom-right-radius:  30px 40px;
}
.collection>:nth-child(10):hover:before {
  opacity: 1;
}
.collection>:nth-child(10):hover:after {
  opacity: 1;
  height: 65px;
  
}
.collection>:nth-child(10):hover
.glasses>span {
  background-color: black;
  border-radius: 20px;
  height: 20px;
}
.collection>:nth-child(10)
.mouth:before {
  content: "";
  display: block;
  transition: .25s;
  opacity: 0;
  position: absolute;
  margin-left: -3px;
  left: 50%;
  margin-top: -5px;
  width: 6px;
  height: 10px;
  border-radius: 6px;
  background-color: black;
}
.collection>:nth-child(10):hover
.mouth {
  width: 8px;
}
.collection>:nth-child(10):hover
.mouth:before {
  opacity: 1;
}

/* eleventh */
.collection>:nth-child(11) {
  position: relative;
}
.collection>:nth-child(11)
.glasses>span {
  transition: .25s;
}
.collection>:nth-child(11):before {
  content: "";
  opacity: 0;
  position: absolute;
  margin-left: 35px;
  z-index: 1;
  transition: .25s;
  margin-top: -10px;
  font-family:sans-serif;
}
.collection>:nth-child(11)
.mouth:before {
  pointer-events: none;
  content: "";
  border: 2px solid black;
  transition: .25s;
  opacity: 0;
  width: 50px;
  height: 25px;
  background-color: white;
  position: absolute;
  margin-left: -25px;
  left: 50%;
  box-sizing: border-box;
  z-index: 1;
  border-bottom-left-radius:  25px;
  border-bottom-right-radius:  25px;
  margin-top: 10px;
}
/* -- */
.collection>:nth-child(11):hover:before {
  opacity: 1;
  margin-top: 0px;
  font-size: 20px;
  content: "|||";
}
.collection>:nth-child(11):hover
.mouth:before {
  opacity: 1;
  margin-top: -10px;
}
.collection>:nth-child(11):hover
.glasses>span {
  border-radius: 20px;
  height: 20px;
  background-color: black;
}
.collection>:nth-child(11):hover
.glasses>span:before {
  content: "`";
  text-indent: -2px;
  font-size: 20px;
  margin-top: -2px;
  color: white;
  font-family:sans-serif;
}
.collection>:nth-child(11):hover
.mouth {
  width: 8px;
}

/* twelfth */
.collection>:nth-child(12) {
  transition: .25s;
  position: relative;
}
.collection>:nth-child(12)>.smoke {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 6px;
  border: 2px solid black;
  box-sizing: border-box;
  background-color: white;
  z-index: 1;
  margin-top: -12px;
  margin-left: -6px;
  transform: rotate(-60deg);
  transform-origin: 100% 50%;
  transition: .25s;
  opacity: 0;
}
.collection>:nth-child(12)>.smoke:before {
  content: "~";
  font-family:sans-serif;
  transition: .25s;
  position: absolute;
  font-size: 30px;
  margin-left: -8px;
  margin-top: -32px;
  transform: rotate(110deg);
}
.collection>:nth-child(12)>.hat {
  pointer-events: none;
  transition: .25s;
  position: absolute;
  width: 54px;
  height: 40px;
  margin-left: -27px;
  left: 50%;
  background-color: black;
  margin-top: -25px;
  transform: rotate(30deg);
  transform-origin: 150% 100%;
  opacity: 0;
}
.collection>:nth-child(12)>.hat:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  width: 80px;
  height: 0px;
  border: 2px solid black;
  left: 50%;
  margin-left: -40px;
  margin-top: 40px;
}
/* -- */
.collection>:nth-child(12):hover
.mouth {
  width: 8px;
  transform: rotate(60deg);
  transform-origin: 20% 50%;
}
.collection>:nth-child(12):hover
.smoke {
  transform: rotate(-20deg);
  opacity: 1;
}
.collection>:nth-child(12):hover
.hat {
  opacity: 1;
  transform: rotate(0deg);
}
.collection>:nth-child(12):hover
.glasses>span {
  background-color: black;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;  
}
.collection>:nth-child(12):hover
.glasses>span:before {
  content: "/";
  text-indent: -2px;
  font-size: 20px;
  margin-top: -2px;
  color: white;
  font-family:sans-serif;
}



/* thirteenth */
.collection>:nth-child(13) {
  position: relative;  
}
.collection>:nth-child(13)>.robot-eye {
  transition: .25s;
  position: absolute;
  width: 60px;
  height: 18px;
  margin-left: -30px;
  left: 50%;
  border: 5px solid black;
  box-sizing: border-box;
  margin-top: -10px;
  opacity: 0;
  background-color: lightgrey;
}
.collection>:nth-child(13)>.robot-eye:before {
  content: "";
  transition: .25s;
  display: block;
  box-sizing: border-box;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: red;
  opacity: 1;
  margin: auto;
}
.collection>:nth-child(13)>.glasses>span {
  transition: .25s;
}
/* -- */
.collection>:nth-child(13):hover
.mouth {
  width: 0px;
  height: 10px;
  margin-top: 0px;
}
.collection>:nth-child(13):hover
.robot-eye {
  margin-top: 20px;
  opacity: 1;
}
.collection>:nth-child(13):hover
.robot-eye:before {
  animation-delay: .5s;
  animation-duration: 1.5s;
  animation-name: robot-eye-move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes robot-eye-move {
  0% {margin-left: 21px;}
  25% {margin-left: 10px;}
  75% {margin-left: 32px;}
  100% {margin-left: 21px;}
}
.collection>:nth-child(13):hover
.glasses>span {
  opacity: 0;
  height: 0;
}

/* fourteenth */
.collection>:nth-child(14)>.glasses>span {
  background-color: black;
}
/* -- */
.collection>:nth-child(14):hover
.glasses>span:before {
  content: "/";
  text-indent: -2px;
  font-size: 20px;
  margin-top: -2px;
  color: white;
  font-family:sans-serif;
}
.collection>:nth-child(14):hover
.mouth {
  transform: rotate(-30deg);
  transform-origin: 50% -200%;
}
.collection>:nth-child(14):hover
.glasses>span {
  animation-delay: .25s;
  animation-duration: 2s;
  animation-name: shining;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes shining {
  0% {background-color: black;}
  10% {background-color: #e5e5e5;}
  20% {background-color: #ff6d6d;}
  30% {background-color: #ffca6d;}
  40% {background-color: #ffff6d;}
  50% {background-color: #00c26d;}
  60% {background-color: #b6ff6d;}
  70% {background-color: #6dcaff;}
  80% {background-color: #ec6dff;}
  90% {background-color: #e5e5e5;}
  100% {background-color: black;}
}

/* fifteenth */
.collection>:nth-child(15) {
  position: relative;
}
.collection>:nth-child(15)>.glasses>span {
  transition: .25s;
}
.collection>:nth-child(15)>.nose{
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  box-sizing: border-box;
  margin-left: -5px;
  left: 50%;
  position: absolute;
  z-index: 1;
  transition: .5s;
}
.collection>:nth-child(15) .mouth:before {
  content: "";
  display: block;
  width: 12px;
  height: 0px;
  border-top-left-radius: 4px 12px;
  border-top-right-radius: 4px 12px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: pink;
  border: 1px solid black;
  font-family:sans-serif;
  transition: .25s;
  opacity: 0;
  box-sizing: border-box;
  margin-left: -6px;
  left: 50%;
  position: relative;  
}
.collection>:nth-child(15)>.ears {
  position: absolute;
  width: 60px;
  height: 20px;
  margin-left: 50%;
  left: -30px;
  margin-top: 0px;
  margin-bottom: -15px;
  z-index: -1;
  opacity: 0;
  transition: .25s;
}
.collection>:nth-child(15)>.ears>span{
  display: inline-block;
  position: absolute;
  border-radius: 15px;
  width: 15px;
  height: 15px;
  background-color: white;
  border: 2px solid black;
}
.collection>:nth-child(15)>.ears>.left {
  left: 0;
}
.collection>:nth-child(15)>.ears>.right {
  right: 0;
}
/* -- */
.collection>:nth-child(15):hover {
  border-radius: 25px;
}
.collection>:nth-child(15):hover
.glasses>span {
  border: none;
}
.collection>:nth-child(15):hover
.glasses>span:before {
  content: "^";
  text-indent: 0px;
  font-size: 20px;
  margin-top: 0px;
  font-family:sans-serif;
}
.collection>:nth-child(15):hover
.nose{
  border-top: 5px solid black;
  
}
.collection>:nth-child(15):hover
.mouth {
  width: 10px;
}
.collection>:nth-child(15):hover
.mouth:before {
  height: 12px;
  opacity: 1;
}
.collection>:nth-child(15):hover
.ears {
  opacity: 1;
}


/* sixteenth */
.collection>:nth-child(16)>.glasses>span {
  transition: .25s;
}
.collection>:nth-child(16) .mouth:before {
  content: "";
  transition: .25s;
  display: block;
  opacity: 1;
  position: relative;
  width: 30px;
  height: 15px;
  border: 5px solid lightgrey;
  box-sizing: border-box;
  margin-left: -15px;
  margin-top: -8px;
  left: 50%;
  border-radius: 5px;
  opacity: 0;
  transition: .25s;
}
.collection>:nth-child(16):before {
  content: "";
  opacity: 0;
  position: absolute;
  margin-left: 35px;
  z-index: 1;
  transition: .25s;
  margin-top: -10px;
  font-family:sans-serif;
}
/* -- */
.collection>:nth-child(16):hover
.glasses>span {
  border: none;
}
.collection>:nth-child(16):hover
.mouth:before {
  opacity: 1;
}
.collection>:nth-child(16):hover
.glasses>span:before {
  content: "-";
  text-indent: 0px;
  font-size: 20px;
  margin-top: 0px;
  font-family:sans-serif;
}
.collection>:nth-child(16):hover:before {
  opacity: 1;
  margin-top: 0px;
  font-size: 20px;
  content: "zZ";
}
/* seventeenth */
.collection>:nth-child(17) {
  cursor: pointer;
}
.collection>:nth-child(17)>a {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.collection>:nth-child(17) {
  transition: .25s;
  background-image: url("https://raw.githubusercontent.com/hkjpotato/frontend101/master/other/gficon.jpg");
  background-image: url("https://raw.githubusercontent.com/hkjpotato/mywebsite/master/img/headshot.png");
  background-size: 0%;
  background-repeat: no-repeat;
  background-position: center;
}
/* -- */
.collection>:nth-child(17):hover
a>*{
  display: none;
}
.collection>:nth-child(17):hover 
{
  background-color: lightgrey;
  background-size: 110%;
  border-top: 2px solid #ff6d6d;
  border-right: 2px solid #ffca6d;
  border-bottom: 2px solid #6dcaff;
  border-left: 2px solid #00c26d;
  animation-delay: .25s;
  animation-duration: .5s;
  animation-name: rotate-border;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate-border {
  0% {
    border-top-color:#ff6d6d;
    border-right-color:#ffca6d;
    border-bottom-color:#6dcaff;
    border-left-color:#00c26d;
    background-size: 110%;
  }
  25% {
    border-right-color:#ff6d6d;
    border-bottom-color:#ffca6d;
    border-left-color:#6dcaff;
    border-top-color:#00c26d;
  }
  50% {
    border-bottom-color:#ff6d6d;
    border-left-color:#ffca6d;
    border-top-color:#6dcaff;
    border-right-color:#00c26d;
    background-size: 120%;
  }
  75% {
    border-left-color:#ff6d6d;
    border-top-color:#ffca6d;
    border-right-color:#6dcaff;
    border-bottom-color:#00c26d;
  }
  100% {
    border-top-color:#ff6d6d;
    border-right-color:#ffca6d;
    border-bottom-color:#6dcaff;
    border-left-color:#00c26d;
    background-size: 110%;
  }
}

/* eighteenth */
.collection>:nth-child(18) {
  position: relative;
}
.collection>:nth-child(18)>.glasses>span {
  transition: .25s;
}
.collection>:nth-child(18)>.glasses>span:nth-child(2):after {
  content: "";
  display: block;
  width: 9px;
  height: 0px;
  opacity: 0;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-up: 2px solid transparent;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
  margin-top: -1px;
  margin-left: 10px;
  transition: .25s;
/*   transition: opacity .25s ease 0; */
/*   transition: height .25s ease .55s; */
}
.collection>:nth-child(18)>.moustache {
  position: absolute;
  width: 40px;
  height: 15px;
  margin-left: 50%;
  left: -20px;
  z-index: 1;
  opacity: 1;
  transition: .25s;
  margin-top: -2px;
}
.collection>:nth-child(18)>.moustache>span{
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
}
.collection>:nth-child(18)>.moustache>span:before {
  content: "~";
  display: block;
  font-family:sans-serif;
  transition: .25s;
  font-size: 0px;
  font-weight: 700;
  line-height: 20px;
  transition: .25s;
  text-align: center;
}
.collection>:nth-child(18)>.moustache>.left {
   left: 0;
   transform: scale(-1, 1) rotate(30deg);
}
.collection>:nth-child(18)>.moustache>.right {
   right: 0;
   transform: rotate(30deg);
}
/* -- */
.collection>:nth-child(18):hover
.glasses>span {
  height: 20px;
  border-radius: 20px;
}
.collection>:nth-child(18):hover
.glasses>span:before {
  text-indent: -3px;
  font-size: 30px;
  margin-top: -15px;
}
.collection>:nth-child(18):hover
.glasses>span:nth-child(1) {
  border-color: white;
}
.collection>:nth-child(18):hover
.glasses>span:nth-child(2):after {
  height: 12px;
  opacity: 1;
}
.collection>:nth-child(18):hover
.mouth {
  width: 8px;
}

.collection>:nth-child(18):hover
.moustache>span:before{
  font-size: 30px;
}

/* nineteenth */
.collection>:nth-child(19):hover
.glasses>span:before {
  text-indent: 0px;
  font-size: 20px;
  margin-top: -4px;
  font-family:sans-serif;
}
.collection>:nth-child(19):hover
.glasses>span:nth-child(1):before {
  content: ">";
}
.collection>:nth-child(19):hover
.glasses>span:nth-child(2):before {
  content: "<";
}
.collection>:nth-child(19):hover
.mouth {
  height: 12px;
  margin-top: 3px;
  border: 2px solid black;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.collection>:nth-child(19):hover
{
  animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: .3s;
  animation-duration: 1s; 
  transform-style: preserve-3d;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
@keyframes spinner { 
   from {  
    transform: rotateY(0deg); 
   } 
   to 
   { 
    transform: rotateY(-360deg); 
   } 
}

/* twentieth */
.collection>:nth-child(20) {
  position: relative;
}
.collection>:nth-child(20):before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  margin-top: 0px;
  width: 50px;
  height: 0px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background: black;
  opacity: 0;
  transition: height .25s;
}
.collection>:nth-child(20)>.ears {
  position: absolute;
  width: 52px;
  height: 20px;
  margin-left: 50%;
  left: -26px;
  margin-top: 10px;
  z-index: 1;
  opacity: 0;
  transition: margin-top .25s;
}
.collection>:nth-child(20)>.ears>span{
  display: inline-block;
  position: absolute;
  width: 0px;
  height: 0px;
}
.collection>:nth-child(20)>.ears>.left {
  left: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-left:10px solid black;
}

.collection>:nth-child(20)>.ears>.right {
  right: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid black;
}
/* -- */
.collection>:nth-child(20):hover {
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
}
.collection>:nth-child(20):hover:before {
  opacity: 1;
  height: 45px;
  
}
.collection>:nth-child(20):hover
.glasses>span {
  background: black;
}
.collection>:nth-child(20):hover
.glasses>span:before {
  text-indent: 0px;
  font-size: 40px;
  margin-top: 10px;
  font-family:sans-serif;
  transform-origin: 50% 15%;
  color: white;
}
.collection>:nth-child(20):hover
.glasses>span:nth-child(1):before {
  content: "`";
   transform: scale(-1, 1) rotate(120deg);
  
}
.collection>:nth-child(20):hover
.glasses>span:nth-child(2):before {
  content: "`";
   transform: rotate(120deg);
}
.collection>:nth-child(20):hover
.mouth {
  width: 8px;
}
.collection>:nth-child(20):hover
.ears {
  opacity: 1;
  margin-top: 0px;
  
}

/* f21th */
.collection>:nth-child(21) {
  transition: .25s;
  position: relative;
}
.collection>:nth-child(21)>.glasses>span {
  transition: .25s;
}
/* -- */
.collection>:nth-child(21):hover {
/*   border-top-right-radius: 25px; */
/*   border-top-left-radius: 25px; */
  background:  red;
}
.collection>:nth-child(21):hover
.glasses>span:nth-child(1) {
  border-bottom-right-radius: 20px 30px;
  border-bottom-left-radius: 30px 30px;

  transform: rotate(36deg);
  margin-left: -2px;
}
.collection>:nth-child(21):hover
.glasses>span:nth-child(2) {
  border-bottom-right-radius: 30px 30px;
  border-bottom-left-radius: 20px 30px;

  transform: rotate(-36deg);
  margin-right: -2px;
}
.collection>:nth-child(21):hover
.glasses>span:before {
  text-indent: 0px;
  opacity: 0;
}
.collection>:nth-child(21):hover
.mouth {
  width: 0px;
  opacity: 0;
}
/* 22th */
/* -- */
.collection>:nth-child(22):hover
{
  background-color: black;
}
.collection>:nth-child(22):hover
.glasses {
  background-color: white;
  border-radius: 25px;
}
.collection>:nth-child(22):hover
.glasses>span {
  border: none;
  background: none;
}
.collection>:nth-child(22):hover
.glasses>span:before {
  text-indent: -3px;
  font-size: 30px;
  margin-top: -15px;

}

/* 23th */
/* -- */
.collection>:nth-child(23):hover
.glasses {
  background-color: white;
  overflow: hidden;
  border-radius: 25px;
  width: 40px;
  margin-left: -20px;
  border-bottom: 3px solid red;
  margin-bottom: -5px;
  z-index: 1;
}
.collection>:nth-child(23):hover
.glasses>span {
  background: black;
  width: 15px;
  border-radius: 100%;
  margin-top: -10px;
}

.collection>:nth-child(23):hover
.glasses>span:before {
  display: none;
}

.collection>:nth-child(23):hover
.mouth {
  width: 30px;
  height: 15px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-top: -8px;
  border: 3px solid red;
}


/* 24th */
.collection>:nth-child(24) {
  position: relative;
  box-shadow: 0 0 0 2px white;
}
.collection>:nth-child(24)>.headset {
  position: absolute;
  width: 80px;
  height: 20px;
  margin: auto;
  margin-left: 50%;
  left: -40px;
  box-sizing: border-box;
  z-index: -1;
  opacity: 0;
  margin-top: 0px;
  transition: .25s;
}
.collection>:nth-child(24)>.headset:before {
  content: "";
  display: block;
  width: 64px;
  height: 30px;
  border: 3px solid black;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  margin-left: -32px;
  margin-top: -25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.collection>:nth-child(24)>.headset>span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid white;
  position: absolute;
  border-radius: 8px;
  background-color: black;
}
.collection>:nth-child(24)>.headset>.left {
  left: 0;
}
.collection>:nth-child(24)>.headset>.right {
  right: 0;
}
.collection>:nth-child(24)
.mouth:before {
  /*content: "\266B";*/
  content: "\266A";
  font-weight: 700;
  font-family: sans-serif;
  margin-left: 5px;
  margin-top: -10px;
  transform: rotate(30deg);
  display: block;
  font-size: 35px;
  transition: .25s;
  opacity: 0;
}
/* -- */
.collection>:nth-child(24):hover
.glasses>span {
  background-color: black;
}
.collection>:nth-child(24):hover
.glasses>span:before {
  content: "/";
  text-indent: -2px;
  font-size: 20px;
  margin-top: -2px;
  color: white;
  font-family:sans-serif;
}
.collection>:nth-child(24):hover
.mouth:before {
  opacity: 1;
}
.collection>:nth-child(24):hover
.mouth {
  transform: rotate(-30deg);
  transform-origin: 50% -250%;
}
.collection>:nth-child(24):hover
.headset {
  margin-top: 18px;
  opacity: 1;
}