i want to make the eye move down again after it goes up as a facial emotion

Question

https://code.sololearn.com/Wt64SM2V2SXD/#html

Answer 1

I got it animating like you may want but needed to change more than the JavaScript.

I updated position, top, left, transition in the following CSS rules:
#f1e1{
width: 80px;
height: 150px;
border-radius: 50px;
background-color:rgb(255, 255, 255);
position: relative;
left: 400px;
top: 100px;
}
#f1b1{
width: 60px;
height: 60px;
background-color:rgb(80, 80, 80);
border-radius: 50%;
position: absolute;
left: 10px;
top: 75px;
}

The transition you had was removed because it interfered with the JavaScript-controlled animation.

I also replaced all the JavaScript with this:
var f1b1 =document.getElementById('f1b1')
var f1b2 =document.getElementById('f1b2')
var animationStart;

function update() {
var t = new Date().getTime() - animationStart;
var animationRatio = t * 0.001;
if (animationRatio >= 1) {
animationRatio = 1;
}
else {
requestAnimationFrame(update);
}
var newTop = Math.round(35 + 15 * Math.cos(animationRatio * Math.PI * 2));
f1b1.style.top = newTop + 'px';
}

function start() {
animationStart = new Date().getTime();
update();
}

addEventListener('load',start)

A cos wave has a smooth curve which translates to a fairly smooth eye movement. The timeout you used will animate at slightly different speeds based on performance of the browser and computing device. I changed to rely on current time and used requestAnimationFrame so the frame rate will be as fast as possible and animation should have a similar pace regardless of the client's hardware.

A CSS animation might be of interest to you too. If you just wanted an animation upon loading the page, CSS animation would be great. CSS animations can work without any JavaScript.

You might also be interested in my eye simulator at:
https://code.sololearn.com/WkjYmMJ025jn

Answer 2

Josh greig thanks alot looks like alot of effort