问将多个CSS动画合并为一个
EN

Stack Overflow用户

提问于 2021-03-20 23:40:39

回答 1查看 39关注 0票数 0

我是编程和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;
}

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

谢谢你的回答，祝你有愉快的一天！

css

回答 1

Stack Overflow用户

发布于 2021-03-21 00:48:01

我已经改变了你的代码结构，并添加了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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66723434

复制

相似问题

问将多个CSS动画合并为一个
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将多个CSS动画合并为一个EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将多个CSS动画合并为一个
EN