具有两个CSS动画的DOM元素如何起作用并相互交互

Question

我目前正在将两个动画应用于某些图像。进入视图时的第一个，第二个悬停时。

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

有人理解为什么会发生这种情况？

Answer 1

我看不到我自己尝试了什么问题。您可以添加您的html吗？

使用fill:freeze;

完成动画时，您可以停止动画

如果那不起作用，请添加您的HTML，因为当我使用您使用的类时，它的工作原理很好。也许可以对您想要的准确解释。我很高兴为您提供帮助！