具有两个 css 动画的 dom 元素如何工作并相互交互？答案

【问题标题】：How does a dom element with two css animation work and interact with each others?具有两个 css 动画的 dom 元素如何工作并相互交互？
【发布时间】：2019-08-13 15:47:54
【问题描述】：

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

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

有人明白为什么会这样吗？

【问题讨论】：

标签： css reactjs animation

【解决方案1】：

我看不出有什么问题，实际上我自己尝试过。你能添加你的html吗？

您可以使用fill:freeze; 停止动画完成后

如果这不起作用，请添加您的 html，因为当我使用您使用的类时，它工作得很好。也许可以解释一下你到底想要什么。我很乐意为您提供帮助！

【讨论】：

我用我的 JSX 编辑了这篇文章，我正在使用 react。不幸的是，冻结并没有解决问题：每次我将图像悬停时都会重新加载第一个动画，而且当两个动画交互时它们甚至无法正确缩放......无论哪种方式都感谢您的帮助。
我玩了一下它，什么样的工作是给img周围的div一个类。我认为，如果您在每个单独的图像周围放置一个 div 并带有一个可以解决的类:) 之后您只需将悬停中的类更改为您的新类而不是 "img" .AnimationGame img:hover{ 变为: .AnimationGame .(newclass):hover{
是的，它在添加包装 div 和使用 html 结构时有效。谢谢你验证。