Question

并试图找出基于该帖子的问题，我仍然无法弄清楚为什么我的关键帧只是拒绝移动我的div块。我仍然是html和css的新手。

代码中的图像应该是徽标，但我现在只是随机插入一个图像作为占位符。

任何帮助将不胜感激。非常感谢你！

@keyframes move {
	0% { top: 0%; opacity: 0;}
    100% { top: 50%; opacity: 1;}
	
}

a#btn_niche {
	margin: auto;
	font-family: 'Bitter', serif;
	text-decoration: none;
	text-align: center;
	color: #5A3E2E;
	position: absolute;
	display: block;
	letter-spacing: 0.07em;
	font-size: 2.1em;
}

.niche_logo {
	margin: auto;
}

.logoblock:hover {
	animation: mymove 3s ease-out forwards;
	animation-fill-mode: forwards;
}

<!DOCTYPE html>
<html>
<body>
<div class="button_container">
	<a href="http://www.uncommonobjects.com/" target="_blank" id="btn_niche"><div class="logoblock"><img class="niche_logo" src="https://cbsstlouis.files.wordpress.com/2011/01/niche_taste_exterior.jpg" width=7%></div> niche</a>
</div>
</body>
</html>

Answer 1

你应该改变mymove来移动动画属性。您也可以使用margin-top代替top属性。你应该将动画放在niche_logo上以使其正常工作。如果你在logoblock类上使用你的动画，因为它向下移动你的鼠标指针不会在你的元素上，它会跳回来。

@keyframes move {
	0% { margin-top: 0; opacity: 0;}
    100% { margin-top: 50%; opacity: 1;}
	
}

a#btn_niche {
	margin: auto;
	font-family: 'Bitter', serif;
	text-decoration: none;
	text-align: center;
	color: #5A3E2E;
	position: absolute;
	display: block;
	letter-spacing: 0.07em;
	font-size: 2.1em;
}

.niche_logo {
	margin: auto;
}

.niche_logo:hover {
	animation: move 3s ease-out forwards; /*change my move to move*/
	animation-fill-mode: forwards;
}

<!DOCTYPE html>
<html>
<body>
<div class="button_container">
	<a href="http://www.uncommonobjects.com/" target="_blank" id="btn_niche"><div class="logoblock"><img class="niche_logo" src="https://cbsstlouis.files.wordpress.com/2011/01/niche_taste_exterior.jpg" width=7%></div> niche</a>
</div>
</body>
</html>

关键帧不会移动我的div块

1 个答案: