Задать вопрос
@asoloid
css

Почему срабатывает только первая анимация?

<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
			
		<style>
			#pagrindinis{
				margin-left:35%;
				width:30%;
				height: 600px;
				background-color:blue;
				padding: 20px 6px 6px 6px;
				
			}
			#frame{
				height:600px
				width:30%;
				overflow: hidden;
				text-align:center;
				
				
				
				
			}
			
			#frame img {
				position:relative;
				animation: image_animation 2s linear 0s 1 normal;
			}
			
			
			@keyframes  image_animation {
                0% { top: -200px; }
              100% { top: 0px; }
              }
              

			
			#quote { color:yellow;
				animation: quote_animation 2s linear 0s 1 normal;
				
				}
				
			@keyframes quote_animation {
                0% { left: -200px; }
                100% { left: 200px; }
             }
             
             @keyframes quote_animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    
}

@keyframes quote_animation {
    0% { top: 0px; }
    100% { top: -360px; }
}

@keyframes img_animation {
    0% { top: 0px; }
    100% { top: -360px; }
}




				
			#my_information{color:white;
				font-size:14px;
				margin-right: auto;
				margin-left: 8%;
				margin-top: 2px;
				margin-bottom: auto;
				}
				
			
			  
			  
			
				
			}
			
			hr {
				width:84%; 
				height:0.6px; 
				background-color:white;
				
			}
			
		</style>
		
	
	</head>
	
	<body>
		<div id="pagrindinis">
			<h1 style="color:Yellow; text-align:center">My animation</h1>
			<div id="frame">
				<img src="https://m.media-amazon.com/images/I/81l-+mFDVzL._SS500_.jpg" width="400" height="280"   />

				<span id="quote">"Stonks"<span>
			</div>
		<div id="info">
				<h2 style="color:white; margin-top:20px; margin-left:8%; margin-bottom:4px">Information</h2>
				<hr>
				1.IMAGE. Slides from above &nbsp a)<br>
				2.TEXT. Slides from the left &nbsp b) <br>
				3.TEXT. Rotates 360 degrees &nbsp c)<br>
				4.TEXT. Slides down &nbsp c) <br>
				5.IMAGE. Slides down&nbsp b)</p>
			</div>
			

		</div>
	</body>
</html>
  • Вопрос задан
  • 132 просмотра
Комментировать
Подписаться Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@g33km
quote_animation не работает по причине того, что вы не указали ему относительное позиционирование
position: relative;
По этой причине блок никуда не сдвигается

Затем, присутствует большая ошибка - вы несколько раз переназначили
@keyframes quote_animation 
@keyframes quote_animation {
                0% { left: -200px; }
                100% { left: 200px; }
             }      
             @keyframes quote_animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    
}
@keyframes quote_animation {
    0% { top: 0px; }
    100% { top: -360px; }
}


Как я понял, вы хотели, чтобы вначале надпись сдвигалась влево-вправо, затем проворачивалась на 360 градусов и после этого поднималась на 360px (либо все это должно происходить одновременно). Так вот все эти действия должны быть внутри одного @keyframes, в данном случае анимация будет выполнять только по заданным ниже всех правилам, то есть
@keyframes quote_animation {
    0% { top: 0px; }
    100% { top: -360px; }
}


Опять-таки, ничего не происходит по причине того, что вы не задали относительное позиционирование.

Кейфрейм img_animation вообще ни к одному объекту не применяется, поэтому ничего не происходит.

У вас достаточно плохо написан код, начиная от неаккуратности, заканчивая ошибками непосредственно в коде. К примеру, в свойствах, применяемых к селектору #frame, не поставлена точка с запятой после
height:600px

Думаю, если покопаться в коде глубже, там найдется еще много чего нехорошего.
Успехов!
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend Developer
Wanted. • Санкт-Петербург
До 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ручное тестирование приложения в сторах (iOS и Android)
05 нояб. 2024, в 23:19
3000 руб./за проект
Разработать одностраничный сайт , на сайте будет описание проекта
05 нояб. 2024, в 22:00
5000 руб./за проект
Ещё заказы