Изменить положение изображения или класс после воспроизведения анимации с помощью CSS? - PullRequest
Новая
       3

Изменить положение изображения или класс после воспроизведения анимации с помощью CSS?

0 голосов
/ 26 октября 2018

Мне было интересно, можете ли вы изменить класс или положение изображения после воспроизведения анимации на анимации.Я хочу, чтобы изображение скользило вниз после анимации и оставалось там, чтобы вы могли щелкнуть связанные изображения и перейти на другие страницы.Я хочу, чтобы анимация воспроизводилась только один раз, а после просто оставалась там?Есть что-нибудь, что могло бы помочь?

Спасибо 

<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;
        }
        100% {
            top:500px;
        }
    }
    @keyframes floatBubble {
        0% {
            top:275px;
        }
        100%{
           top: 500px;
        }
    }
	
</style>
<p>This is the content for Layout P Tag</p>
<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>

1 Ответ

0 голосов
/ 26 октября 2018

Переход проще и здесь хорошо работает. Изображение останется скрытым, пока ваша мышь находится над контейнером. Как только вы переместите указатель мыши, изображение вернется на свое место. 

.bottom {
  position: relative;
  height: 300px;
  width: 300px;
  padding: 40px;
  overflow: hidden;
}

.bottom img {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: top 2s ease-out;
}

.bottom:hover img {
  top: 100%;
}
<div class="bottom">
  <p>Some hidden content, you can put your link here</p>
  <img src="https://placehold.it/300x300" alt="Bottom Building">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...