使用CSS播放动画后更改图像位置或类？

Question

我想知道在动画播放后是否可以更改图像的类或位置。 我希望图像在动画播放后向下滑动并停留在该位置，以便您可以单击链接的图像并转到其他页面。 我希望动画只播放一次，然后停留在那里吗？ 有什么可以帮助的吗？

谢谢

 <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> 

Answer 1

过渡比较简单，在这里效果很好。 当鼠标悬停在其容器上方时，图像将保持隐藏状态。 将鼠标移出后，图像将返回其位置。

 .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>