Help with animation

Hi campers! This is the first time I’ve made something like this so I could use your opinion and also, I would like to make his eyes roll if possible, but I’m not sure how. Thanks in advance :grinning:

You can use keyframes.

I changed your CSS, you can use the code below to test and figure it out from there.

I changed the class .right-eye to

.eye-right{
  position: absolute;
  background: white;
  height: 25%;
  width: 25%;
  border-radius: 50%;
  z-index: 2;
  right: 18%;
  top: 33%;
  animation-name: roll;
  animation-duration: 1s;
  animation-iteration-count: infinite;
   }

and I added the following to your CSS

@keyframes roll {
  0% {
    transform: scale(1) rotate(-90deg);
  }
  50% {
    transform: scale(0.6) rotate(-90deg);
  }
}

Good job, by the way!

2 Likes