css eye animations

In this example below you will see how to do a css eye animations with some HTML / CSS and Javascript

testing some eye animations with css for a character

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>css eye animations</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrap">
	blink
	<div class="eye blink"></div>
	<div class="eye blink"></div>
</div>

<div class="wrap">
	blink 1
	<div class="eye blink"></div>
	<div class="eye blink d1"></div>
</div>

<div class="wrap">
	d blink
	<div class="eye double-blink"></div>
	<div class="eye double-blink"></div>
</div>

<div class="wrap">
	grin
	<div class="eye grin"></div>
	<div class="eye grin"></div>
</div>

<div class="wrap">
	sad
	<div class="eye sad"></div>
	<div class="eye sad"></div>
</div>

<div class="wrap">
	up
	<div class="eye up"></div>
	<div class="eye up"></div>
</div>

<div class="wrap">
	down
	<div class="eye down"></div>
	<div class="eye down"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/creme/css-eye-animations-rdjXav */
html, body {
  width: 100%;
  height: 100%;
}

body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #EAE0CE;
}
@media only screen and (min-width: 1180px) {
  body {
    flex-direction: row;
    justify-content: center;
  }
}

.wrap {
  position: relative;
  width: 100px;
  height: 40px;
  margin: 0 2rem;
  color: #dbc9aa;
  line-height: 40px;
  font-size: 2rem;
  text-align: center;
  font-weight: 400;
  padding-top: 5.5rem;
  margin-bottom: 0;
}
.wrap .eye {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
}
.wrap .eye:before {
  content: '';
  position: absolute;
  margin: auto;
  width: 10px;
  height: 10px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background: #141414;
}
.wrap .eye.grin:after, .wrap .eye.sad:after {
  content: '';
  position: absolute;
  width: calc(100% + 20px);
  height: 0;
  border-radius: 50%;
  background: #EAE0CE;
  left: -10px;
}
.wrap .eye.grin:after {
  bottom: -10px;
}
.wrap .eye.sad:after {
  top: -10px;
}
.wrap .eye:first-child {
  left: 0;
}
.wrap .eye:last-child {
  right: 0;
}
.wrap .eye.blink {
  -webkit-animation: blink 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: blink 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.double-blink {
  -webkit-animation: double-blink 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: double-blink 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.grin:before {
  -webkit-animation: grinb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: grinb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.grin:after {
  -webkit-animation: grina 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: grina 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.sad:before {
  -webkit-animation: sadb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: sadb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.sad:after {
  -webkit-animation: grina 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: grina 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.up:before {
  -webkit-animation: grinb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: grinb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.down:before {
  -webkit-animation: sadb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: sadb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.wrap .eye.d1 {
  -webkit-animation-delay: .1s;
          animation-delay: .1s;
}

@-webkit-keyframes blink {
  0%, 8% {
    height: 40px;
  }
  10%, 12% {
    height: 5px;
  }
  14%, 100% {
    height: 40px;
  }
}

@keyframes blink {
  0%, 8% {
    height: 40px;
  }
  10%, 12% {
    height: 5px;
  }
  14%, 100% {
    height: 40px;
  }
}
@-webkit-keyframes double-blink {
  0%, 8% {
    height: 40px;
  }
  10%, 12% {
    height: 10px;
  }
  13% {
    height: 40px;
  }
  14%, 16% {
    height: 0;
  }
  18%, 100% {
    height: 40px;
  }
}
@keyframes double-blink {
  0%, 8% {
    height: 40px;
  }
  10%, 12% {
    height: 10px;
  }
  13% {
    height: 40px;
  }
  14%, 16% {
    height: 0;
  }
  18%, 100% {
    height: 40px;
  }
}
@-webkit-keyframes grinb {
  0%, 10% {
    bottom: 0;
  }
  20%, 40% {
    bottom: 50%;
  }
  50%, 100% {
    bottom: 0;
  }
}
@keyframes grinb {
  0%, 10% {
    bottom: 0;
  }
  20%, 40% {
    bottom: 50%;
  }
  50%, 100% {
    bottom: 0;
  }
}
@-webkit-keyframes grina {
  0%, 10% {
    height: 0;
  }
  20%, 40% {
    height: 100%;
  }
  50%, 100% {
    height: 0;
  }
}
@keyframes grina {
  0%, 10% {
    height: 0;
  }
  20%, 40% {
    height: 100%;
  }
  50%, 100% {
    height: 0;
  }
}
@-webkit-keyframes sadb {
  0%, 10% {
    top: 0;
  }
  20%, 40% {
    top: 50%;
  }
  50%, 100% {
    top: 0;
  }
}
@keyframes sadb {
  0%, 10% {
    top: 0;
  }
  20%, 40% {
    top: 50%;
  }
  50%, 100% {
    top: 0;
  }
}

Comments