Оставался ли элемент в конце анимации после ": hover"? - PullRequest
Новая
       0

Оставался ли элемент в конце анимации после ": hover"?

0 голосов
/ 28 декабря 2018

Всякий раз, когда я парю над первым изображением, оно перемещается в другое место.Это должно случиться.Но он возвращается к своему первоначальному месту после зависания.Мне нужно, чтобы остаться в конечном месте.Если вы поняли это, вы можете помочь?Заранее спасибо.

Я пытался сделать анимацию кода бесконечной, но, похоже, это не сработало. 

<html style="overflow: hidden;">
	<meta name="viewport" content="width=device-width">
	<head>
		<script>
			window.start();
			function start(){
				alert("This site is secure with SITELOCK TM. If this Website is hacked, the record will be loggled, and will be reported.");
				console.log("This site is secure with SITELOCK TM. If this Website is hacked, the record will be loggled, and will be reported.")
			}
		</script>
		<style>
			@keyframes slide{
				0%{
					width: 50px;
					
				}
				100%{
					width: 300px;
				}
			}
			@keyframes fly{
				0%{
					top: 25;
					left: 17;
					width: 20;
				}
				100%{
					top: 157;
					left: 30;
				}
			}
			@keyframes fade{
				from{opacity: 0;}
				to{opacity: 1;}
			}
			@keyframes fade2{
				from{opacity: 0;}
				to{opacity: 1;}
			}
			@keyframes goaway{
				0%{
					opacity: 1;
				}
				100%{
					opacity: 0;
				}
			}
			
			.nav:hover{
				animation: slide 2s forwards;
			}
			.nav:hover > center > #home{
				animation: fade2 2s forwards;
			}
			.nav:hover > center > #about{
				animation: fade 2s forwards;
			}
			.nav:hover > #rocket{
				animation: fly 2s forwards;
			}
			.nav:hover > #title{
				animation: fade 7s forwards;
			}
			.nav:hover > center > #shop{
				animation: fade 3s forwards;
			}
			.nav:hover > #menu_mark{
				animation: goaway 1s forwards;
			}
			#image1:hover{
				animation: move1 0.5s infinite;
			}
			@keyframes move1{
				0%{
					width: 160px;
					top: 70px;
					left: 200px;
				}
				50%{
					width: 180px;
					top: 50px;
					left: 400px;
				}
				100%{
					width: 200px;
					top: 30px;
					left: 600px;
				}
			}
			#image1:hover ~ #image2{
				animation: move2 0.5s infinite;
			}
			@keyframes move2{
				0%{
					left: 400px;
					width: 180px;
					top: 50px;
				}
				50%{
					left: 600px;
					width: 200px;
					top: 30px;
				}
				100%{
					width: 180px;
					top: 50px;
					left: 820px;
				}
			}
			#image1: ~ #image3{
				
			}
			#image1:hover ~ #image4{
				
			}
			#image1:hover ~ #image5{
				
			}
		</style>
		<script>
			
		</script>
	</head>
	<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Thasadith" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
	<body style=" align-content: center; margin: 0; padding: 0; background-color: #404040; overflow-y: hidden;">
		<div class="elements">
			<img src="Image%201.png" id="image1" style="width: 160px; position: absolute; top: 70px; left: 220px; border-radius: 10px;">
			<img src="Image%202.png" id="image2" style="width: 180px; position: absolute; top: 50px; left: 400px; border-radius: 10px;">
			<img src="Image%203.png" id="image3" style="width: 200px; position: absolute; top: 30px; left: 600px; border-radius: 10px;">
			<img src="Image%204.png" id="image4" style="width: 180px; position: absolute; top: 50px; left: 820px; border-radius: 10px;">
			<img src="Image%205.png" id="image5" style="width: 160px; position: absolute; top: 70px; left: 1015px; border-radius: 10px;">
		</div>
		<div class="nav" style="background-color: #282829; height: 800px; width: 50px; box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.4); margin-bottom: 10px; position: sticky; float: left;" >
			<span id="title" style="display: inline-block; font-family: Thasadith; color: white; font-size: 40px; position: absolute; top: 150; left: 60px; opacity: 0;">MONOSPACE</span>
			<center><span id="home" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; padding-top: 250px; opacity: 0;">HOME</span><br>
			<span id="about" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; opacity: 0;">ABOUT</span><br>
			<span id="shop" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; opacity: 0;">SHOP</span><br></center>
			<img id="menu_mark" src="LogoMakr_6Pr2go.png" style="width: 25px; position: absolute; top: 300px; left: 12.5px;">
			<img id="rocket" src="LogoMakr_9Pl0y8.png" style="color: white; position: absolute; top: 25; left: 17; width: 20;">
			
		</div>
	</body>
</html>

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

Вам нужны две вещи.Во-первых, используйте forwards в анимации, а не infinite, что приведет к бесконечному циклу анимации.Во-вторых, вам нужно поддерживать состояние.Как только вы наведите курсор мыши, это конечное состояние анимации будет потеряно и будет повторяться при повторном наведении.Чтобы избежать этого, используйте javascript для добавления класса при наведении, это будет обрабатывать состояние для вас. 

const image = document.getElementById("image1");

const onHover = (e) => {
  event.target.classList.add("hovered");
  console.log('image hovered');
  event.target.removeEventListener("mouseenter", onHover) 
};

image.addEventListener("mouseenter", onHover) 
 
#image1 {
  width: 100px;
  height: 100px;
  background: blue
}

#image1.hovered {
  animation: move1 0.5s forwards;
}

@keyframes move1{
  0%{
    width: 160px;
    top: 70px;
    left: 200px;
  }
  50%{
    width: 180px;
    top: 50px;
    left: 400px;
  }
  100%{
    width: 200px;
    top: 30px;
    left: 600px;
  }
}
<div id="image1">

</div>
0 голосов
/ 28 декабря 2018

Попробуйте добавить время для вашей анимации: 

.nav:hover > center > #home{ animation: fade2 2s ease-in-out forwards; }

Я никогда не использую в / из, я всегда использую 0% / 100%, вы можете делать больше таким образом.

Скажите, работает ли он, потому что я использую свои ключевые кадры вот так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...