Css-анимация не остается на месте после воспроизведения и воспроизводится более одного раза даже после добавления одной итерации.

просто начинающий программист, которому нужна помощь для веб-сайта. Моей целью было сделать так, чтобы нижнее изображение скользило вниз, чтобы пользователь мог нажимать кнопки и переключать страницы. Я хотел, чтобы изображение оставалось на своем месте после завершения анимации. Я попытался добавить animation-fillmode: forward, и это сработало, но после добавления кода animation-iteration: 1 он продолжал воспроизводиться снова и снова.

Добро пожаловать в любую помощь и спасибо, Айдан Чунг

<html>
<head>
<meta charset="utf-8">
<title>aidancheung.com</title>
</head>
<style>
	h1 {
		font-family: coolvetica;
		text-align: center;
}
 .bottom {
        position: absolute;
        top: 275px;
    }
    .bottom:hover img {
     position: absolute;
        -webkit-animation: floatBubble 2s  normal ease-out;
        animation: floatBubble 2s normal ease-out;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;

    }
    @-webkit-keyframes floatBubble {
        0% {
            top:275px;
        }
        50%{
           top: 500px;
        }
        100% {
            top:275px;
        }
    }
    @keyframes floatBubble {
        0% {
            top:275px;
        }
        50%{
           top: 500px;
        }
        100% {
            top:275px;
        }
    }
	
</style>
<img src="Website.png" alt="Top Building">
<h1 style="line-height:45px;font-size: 100px;">aidancheung.<br><i style="font-size: 50px">portfolio</i></br></h1>
<p style="line-height: 2px;text-align: center;"><a href="aidancheung.htm"><img src="home.png" width="545" height="45" title="go to home" alt="Flower"></a><br><a href="https://www.google.com/"><img src="portfolio.png" width="545" height="45" title="go to portfolio" alt="Flower"></a></br><br><a href="https://www.google.com/"><img src="about.png" width="545" height="45" title="go to about" alt="Flower"></a></br></p>
<div class="bottom">
<img class="bottom" src="bottom.png" alt="Bottom Building">
</div>
</html>

Обновление: "добавлен полный код, потому что некоторые люди просили его увидеть

Вы можете добавить свой html?

Daniel Gonzalez 26.10.2018 07:07

Можете ли вы предоставить полный код HTML и CSS?

Arshiya Khanam 26.10.2018 07:26
1
2
48
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На самом деле ваша начальная позиция сверху: 275 пикселей, тогда вы должны закончить ту же позицию, что и ожидаемый результат. Я немного изменяю ваш код. Попробуй это

     .bottom {
        position: absolute;
        top: 275px;
    }
    .bottom:hover img {
     position: absolute;
        -webkit-animation: floatBubble 2s  normal ease-out;
        animation: floatBubble 2s normal ease-out;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;

    }
    @-webkit-keyframes floatBubble {
        0% {
            top:275px;
        }
        50%{
           top: 500px;
        }
        100% {
            top:275px;
        }
    }
    @keyframes floatBubble {
        0% {
            top:275px;
        }
        50%{
           top: 500px;
        }
        100% {
            top:275px;
        }
    }

Надеюсь, это вам поможет.

Спасибо за помощь, но есть ли способ завершить анимацию и остаться на месте?

Aidan Cheung 26.10.2018 17:28

Другие вопросы по теме