@keyframes animation problem

HTML-CSS
#1

Hi !

I’ve tried to play around with the @keyframes rule. I wanted theses two logos to slide from left to middle page and from right to middle page, respectively. While the left one works, the right one does not. I tried a few things but in vain.

image
image1154×401 15.4 KB

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Logo animation</title>	

		<style>	
			#main_wrapper {
				width: 900px;
				height: 300px;
				border: solid 1px;
			}

			#logo1 {
				position: relative;
				animation-name: sliding1;
				animation-duration: 3s;
				width: 200px;
			}

			#logo2 {
				position: absolute;
				left: 700px;
				animation-name: sliding2;
				animation-duration: 3s;
				width: 200px;
			}


			@keyframes sliding1 {
				0% {
					left: 0;
				}

				100% { 
					left: 350px; 
				}
			}

			@keyframes sliding2 {
				0% {
					right: 0;
				}

				100% {
					right: -350px;
				}
			}



		</style>
	</head>



	<body>
		<div id="main_wrapper">
			<img src="logo_anim.png" alt="Logo J. Milliet" id="logo1" class="logos"><br>
			<img src="logo_anim.png" alt="Logo J. Milliet" id="logo2" class="logos">
		</div>
	</body>
</html>```

Could you give me a hint to make it work ?  Thanks
#2

Try to add border to logo2 and see whats happening.

1 Like
#3

Instead of

right: -350px;

try

left: 350px;
1 Like
#4

Try to change the position attribute.
Set your main_wrapper to relative and both logos to absolute (logo1 to the left, logo 2 to the right).

1 Like
#5

It worked, thanks. But I don’t get the reason why it does not when it’s set to “right”.