1

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

http://jsfiddle.net/edlea/qN2T4/

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);
    }
}
4

4 回答 4

1

您为悬停状态设置的动画可以通过转换来实现。（只需在悬停状态下设置transform，在base中设置transition delay）

它将更易于管理，并且当您返回未悬停状态时，动画将不会再次运行。

于 2013-11-06T06:23:05.423 回答
1

尝试仅在页面加载时显示动画。为此，在 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;
}

加载页面后删除“预加载”类，如下所示：-

 window.onload = function(){
                setTimeout(function(){
                    document.getElementById('preload_div').classList.remove('preload');   
                }, 200)
            }
于 2013-11-06T06:26:48.200 回答
1

这是jquery的解决方案

小提琴

这是jquery代码

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

$(".bubble").hover(function() {
    $(".bubble").removeClass("animated");
  })
});
于 2013-11-06T06:24:26.007 回答
0

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

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

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

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;}
}
于 2021-03-13T14:10:43.377 回答