我目前正在对某些图像应用两个动画。进入 View 时第一个,悬停时第二个。
.Intro {
background-image : url('../../img/backgroundWorkshop.svg');
background-size: cover;
min-height: 100vh;
color: black;
padding-top : 20vh;
display: flex;
justify-content: center;
}
.AnimationGame1{
animation: animGame 1 2s ease-in forwards;
}
.AnimationGame2{
animation: animGame 1 2s ease-in forwards 0.25s;
}
.AnimationGame3{
animation: animGame 1 2s ease-in forwards 0.5s;
}
.AnimationGame4{
animation: animGame 1 2s ease-in forwards 0.75s;
}
.AnimationGame img:hover{
animation: animGameHover 1 10s ease-out alternate;
position: relative;
padding: 3px;
width: 100%;
}
@keyframes animGame {
0% {
transform: translateX( -2vw) translateY(1vh);
opacity: 0;
}
100% {
transform: translateX(0) translateY(1vh);
opacity: 1;
}
}
@keyframes animGameHover {
0% {
transform: scale(1);
}
100% {
transform: scale(2.5);
}
}
问题是当我悬停这些图像时,悬停动画开始,然后当它结束“AnimationGame”类动画时再次开始。
这是我正在使用 react-bootstrap 的 JSX:
<Row className="Intro">
<Col md={2}>
<p className="middle">Previous</p>
</Col >
<Col sm={6} md={4}>
<div className="AnimationGame">
<div>
<img src={anim1} className="AnimationGame1"></img>
<img src={anim2} className="AnimationGame2"></img>
</div>
<div>
<img src={anim3} className="AnimationGame3"></img>
<img src={anim4} className="AnimationGame4"></img>
</div>
</div>
</Col>
<Col sm={6} md={4}>
<div className="Presentation">
<h1 className="slideTextTitle">PC Gamer and Web Addict</h1>
<p className="slideTextPres"></p>
</div>
<div className="parcours">
</div>
<div className="social">
</div>
<div className="suite">
</div>
</Col>
<Col md={2}>
<p className="right middle">Next</p>
</Col>
</Row>
有人明白为什么会这样吗?
最佳答案
我没看出有什么问题,其实我自己试过了。您可以添加您的 html 吗?
您可以在动画完成后使用 fill:freeze;
如果这不起作用,请添加您的 html,因为当我使用您使用的类时,它工作得很好。或许可以详细解释一下您到底想要什么。我很乐意帮助您!
关于css - 具有两个 css 动画的 dom 元素如何工作并相互交互?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55303307/