Eye SVG/CSS Animation

Puneet Sharma

2 years ago

You can apply the following css to your SVG to animate it. For eyes, you will need to measure transform-origin i.e. distance of the center of each eye from the top and leftmost part of the SVG.

/* Keyframes */
@keyframes eyes {
  0%{
      transform: scale(1,1);
  }  
  27.5%{
      transform: scale(1,1);
  }
  30%{
      transform: scale(1.5,0.5);
  }
  32.5%{
      transform: scale(1,1);
  }
  45%{
      transform: scale(1,1);
  }
  100%{
      transform: scale(1,1); 
  } 
}

/* Eyes */
#left-eye{
  transform-origin: 181px 137px;
  animation: eyes 4s linear infinite;
}
#right-eye{
  transform-origin: 161px 139px;
  animation: eyes 4s linear infinite;
}