Question

我对编程和 CSS 动画很陌生，所以如果我使用了错误的术语，请原谅:-)

我在一个元素上有两个动画。我有一张滑板车上的男人的图像，当它加载时滑入主页（一次），然后悬停时它会弹跳（无限）。

下面是我的代码：

HTML：

 <section>
        <!--Animation and Welcome Heading-->
        <div class="welcome-container">
            <img id="scooter-animation" src="./images/Man_On_Scooter.png" alt="Man on Electric Scooter">
            <h1>welcome to suoto.</h1>
        </div>
 </section>

CSS：

/* Animated Scooter Slide-In */

@keyframes slide {
    100% {
        left: 0%;
    }
}

@-webkit-keyframes slide {
    100% {
        left: 0%;
    }
}

/* Animated Scooter Bounce on Hover */

@keyframes bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

#scooter-animation {
    position: relative;
    left: -200%;
    -webkit-animation: slide 2s forwards;
    -webkit-animation-delay: 0s;
    animation: slide 2s forwards;
    animation-delay: 0s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

#scooter-animation:hover {
    cursor: pointer;
    animation-name: bounce;
    -moz-animation-name: bounce;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    left: 0% !important;
}

除了鼠标悬停在网页上的任何其他位置时，一切都运行得很完美，动画从屏幕上消失并再次滑入，而我只希望这发生一次。有人知道我做错了什么吗？

感谢您的回答，祝您有美好的一天！

Answer 1

我稍微改变了你的代码结构并添加了 Javascript 但它现在应该可以工作了。基本上，我为您的图像提供了初始类名，并在第一次渲染后取消了这个类名。因此，从图像中取消初始 css 功能解决了问题。

window.addEventListener('load', animate);

function animate() {
setTimeout(function(){ document.getElementById('scooter-animation').classList.remove('slide'); }, 3000);
}

/* Animated Scooter Slide-In */

@keyframes slide {
    0% {
        left: -200%;
    }
}

@-webkit-keyframes slide {
    100% {
        left: 0%;
    }
}

/* Animated Scooter Bounce on Hover */

@keyframes bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

#scooter-animation {
    width:200px;
}
.slide {
   position: relative;
    -webkit-animation: slide 2s forwards;
    -webkit-animation-delay: 0s;
    animation: slide 2s 1;
    animation-delay: 0s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}
#scooter-animation:hover {
    cursor: pointer;
    animation-name: bounce;
    -moz-animation-name: bounce;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    left: 0%;
}

<body>

<section>
        <!--Animation and Welcome Heading-->
        <div class="welcome-container">
            <img class='slide' id="scooter-animation" src="https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478" alt="Man on Electric Scooter">
            <h1>welcome to suoto.</h1>
        </div>
 </section>
<body>

将多个 CSS 动画合二为一

1 个答案: