Question

我有一个动画，当页面加载时发生。我想在悬停时为相同的元素设置动画。然而，然后我再次鼠标关闭，原来的过渡再次播放。如何将鼠标关闭的不透明度保持在100％，以便中间的闪光不会发生？

HTML

<div class="bubble animated"></div>

CSS

.bubble{
    background-color:#000;
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    /* INITIAL ANIMATION ON PAGE LOAD */
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}

/* THIS IS WHAT I WANT ON HOVER */
.bubble:hover{
    -webkit-animation-name: blob;
    -moz-animation-name: blob;
    -o-animation-name: blob;
    animation-name: blob;

    -webkit-animation-duration:0.5s;
    -moz-animation-duration:0.5s;
    -ms-animation-duration:0.5s;
    -o-animation-duration:0.5s;
    animation-duration:0.5s;

    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;

    cursor:pointer;
}






/* * * * * * * * * * * * * * */
/* Animations                */
/* * * * * * * * * * * * * * */


.animated{
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;

    -webkit-animation-duration:0.5s;
    -moz-animation-duration:0.5s;
    -ms-animation-duration:0.5s;
    -o-animation-duration:0.5s;
    animation-duration:0.5s;
}



/* * * * * * * blob * * * * * * */
@-webkit-keyframes blob {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.2);
    }
}
@-moz-keyframes blob {
    0% {
        -moz-transform: scale(1);
    }
    100% {
        -moz-transform: scale(1.2);
    }
}
@-o-keyframes blob {
    0% {
        -o-transform: scale(1);
    }
    100% {
        -o-transform: scale(1.2);
    }
}
@keyframes blob {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

/* * * * * * * bounceIn * * * * * * */

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1);
    }
    30% {

        -webkit-transform: scale(1.15);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.9);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(.1);
    }
    30% {

        -moz-transform: scale(1.15);
    }

    60% {
        opacity: 1;
        -moz-transform: scale(.9);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@-o-keyframes bounceIn {
    0% {
        opacity: 0;
        -o-transform: scale(.1);
    }
    30% {

        -o-webkit-transform: scale(1.15);
    }

    60% {
        opacity: 1;
        -o-webkit-transform: scale(.9);
    }

    100% {
        opacity: 1;
        -o-webkit-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.1);
    }
    30% {

        transform: scale(1.15);
    }

    60% {
        opacity: 1;
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

Answer 1

您为悬停状态设置的动画可以通过过渡实现。（只需将转换设置为悬停状态，并在基础中设置转换延迟）

管理起来会更容易，当你回到非悬停状态时，动画将不会再次运行。

Answer 2

这是一个使用jquery的解决方案

fiddle

这是jquery代码

$( document ).ready(function() {
// Handler for .ready() called.

$(".bubble").hover(function() {
    $(".bubble").removeClass("animated");
  })
});

Answer 3

尝试仅在页面加载时显示动画。为此，在div中添加一个类，如下所示： -

 <div id="preload_div" class="preload bubble animated"></div>

从此处更改动画：

.bubble{
    background-color:#000;
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    /* INITIAL ANIMATION ON PAGE LOAD */
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}

到

.bubble{
    background-color:#000;
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

}

.preload.bubble{
    /* INITIAL ANIMATION ON PAGE LOAD */
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}

加载页面后，删除'preload'类，如下所示： -

 window.onload = function(){
                setTimeout(function(){
                    document.getElementById('preload_div').classList.remove('preload');   
                }, 200)
            }

Answer 4

我做了一个带有 1 个 CSS 动画和 1 个带有两行 jQuery 的代码笔来解决页面加载问题。

https://codepen.io/MateoStabio/pen/jOVvwrM

如果您不想在页面加载时使用 CSS 动画，您将需要使用一个很小的 JS 脚本，该脚本仅在元素第一次悬停后才使用 OUT 动画设置元素的样式。我们将通过向元素添加一个 .wasHovered 类并使用 OUT Animation 为添加的类设置样式来实现这一点。

jQuery：

$("svg").mouseout(function() {
    $(this).addClass("wasHovered");
 });

CSS：

svg path{

}

svg.wasHovered path{
    animation: animateLogoOut 1s;
}

svg:hover path{
    animation: animateLogoIn 1s;
}

@keyframes animateLogoIn {
    from {stroke-dashoffset: -510px;}
    to {stroke-dashoffset: 0px;}
}
@keyframes animateLogoOut {
    from {stroke-dashoffset: 0px;}
    to {stroke-dashoffset: -510px;}
}

加载和悬停时不同的CSS动画

4 个答案: