负载和悬停不同的CSS动画 [英] different CSS animation on load and on hover

查看：171
本文介绍了负载和悬停不同的CSS动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这种情况发生在页面加载时动画。我想动画悬停相同的元素。不过，后来我又鼠标关闭，原来则再次播放。我怎样才能保持在鼠标关闭不透明度为100％，所以在中间的那一刹那不会发生？

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

HTML 

 ＆LT; D​​IV CLASS =泡沫动画片＆GT;＆LT; / DIV＆GT;

CSS 

  .bubble {
    背景颜色：＃000;
    宽度：50像素;
    高度：50像素;
    -webkit-边界半径：50％;
    -moz-边界半径：50％;
    边界半径：50％;    / *动画的初始页面加载* /
    -webkit-动画名称：bounceIn;
    -moz-动画名称：bounceIn;
    -o-动画名称：bounceIn;
    动画名称：bounceIn;
}/ *这就是我要悬停* /
.bubble：悬停{
    -webkit-动画名：斑点;
    -moz-动画名：斑点;
    -o-动画名：斑点;
    动画名：斑点;    -webkit-动画持续时间：0.5秒;
    -moz-动画持续时间：0.5秒;
    -ms动画持续时间：0.5秒;
    -o-动画持续时间：0.5秒;
    动画持续时间：0.5秒;    -webkit-动画定时功能：缓解;
    -moz-动画定时功能：缓解;
    -ms动画定时功能：缓解;
    -o-动画定时功能：缓解;
    动画定时功能：缓解;    光标：指针;
}
/ * * * * * * * * * * * * * * * /
/ *动画* /
/ * * * * * * * * * * * * * * * /
.animated {
    -webkit-动画填充模式：两者;
    -moz-动画填充模式：两者;
    -ms动画填充模式：两者;
    -o-动画填充模式：两者;
    动画填充模式：两者;    -webkit-动画持续时间：0.5秒;
    -moz-动画持续时间：0.5秒;
    -ms动画持续时间：0.5秒;
    -o-动画持续时间：0.5秒;
    动画持续时间：0.5秒;
}/ * * * * * * *斑点* * * * * * * /
@ -webkit-关键帧一滴{
    0％{
        -webkit-变换：规模（1）;
    }
    100％{
        -webkit-变换：规模（1.2）;
    }
}
@ -moz-关键帧一滴{
    0％{
        -moz-变换：规模（1）;
    }
    100％{
        -moz-变换：规模（1.2）;
    }
}
@ -o-关键帧一滴{
    0％{
        -o-变换：比例（1）;
    }
    100％{
        -o变换：规模（1.2）;
    }
}
@keyframes一滴{
    0％{
        变换：规模（1）;
    }
    100％{
        变换：规模（1.2）;
    }
}/ * * * * * * * bounceIn * * * * * * * /@ -webkit-关键帧bounceIn {
    0％{
        不透明度：0;
        -webkit-变换：规模（0.1）;
    }
    30％{        -webkit-变换：规模（1.15）;
    }    60％{
        不透明度：1;
        -webkit-变换：规模（0.9）;
    }    100％{
        不透明度：1;
        -webkit-变换：规模（1）;
    }
}@ -moz-关键帧bounceIn {
    0％{
        不透明度：0;
        -moz-变换：规模（0.1）;
    }
    30％{        -moz-变换：规模（1.15）;
    }    60％{
        不透明度：1;
        -moz-变换：规模（0.9）;
    }    100％{
        不透明度：1;
        -moz-变换：规模（1）;
    }
}@ -o-关键帧bounceIn {
    0％{
        不透明度：0;
        -o变换：规模（0.1）;
    }
    30％{        -o-WebKit的变换：规模（1.15）;
    }    60％{
        不透明度：1;
        -o-WebKit的变换：规模（0.9）;
    }    100％{
        不透明度：1;
        -o-WebKit的变换：规模（1）;
    }
}@keyframes bounceIn {
    0％{
        不透明度：0;
        变换：规模（0.1）;
    }
    30％{        变换：规模（1.15）;
    }    60％{
        不透明度：1;
        变换：规模（0.9）;
    }    100％{
        不透明度：1;
        变换：规模（1）;
    }
}


解决方案

尝试只显示在页面加载动画。对于此添加一类这样的DIV： - 

 ＆LT; D​​IV ID =preload_div级=preLOAD泡沫动画片＆GT;＆LT; / DIV＆GT;

这是这一变化的动画：

  .bubble {
    背景颜色：＃000;
    宽度：50像素;
    高度：50像素;
    -webkit-边界半径：50％;
    -moz-边界半径：50％;
    边界半径：50％;    / *动画的初始页面加载* /
    -webkit-动画名称：bounceIn;
    -moz-动画名称：bounceIn;
    -o-动画名称：bounceIn;
    动画名称：bounceIn;
}

到

  .bubble {
    背景颜色：＃000;
    宽度：50像素;
    高度：50像素;
    -webkit-边界半径：50％;
    -moz-边界半径：50％;
    边界半径：50％;}。$ P $ {pload.bubble
    / *动画的初始页面加载* /
    -webkit-动画名称：bounceIn;
    -moz-动画名称：bounceIn;
    -o-动画名称：bounceIn;
    动画名称：bounceIn;
}

加载页面删除'preLOAD级，这样之后： - 

 的window.onload =函数（）{
                的setTimeout（函数（）{
                    的document.getElementById（'preload_div'）classList.remove（'preLOAD'）。
                }，200）
            }

I have an animation that happens when the page loads. I want to animate that same element on hover. However, then I mouse off again, the original transition is played again. How can I keep the opacity on mouse-off to 100% so that flash in the middle doesn't happen?

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

解决方案

Try showing the animation only on page load. For this add a class in the div like this:-

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

Change the animation from this:

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

to

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

After loading the page remove the 'preload' class, like this:-

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

这篇关于负载和悬停不同的CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆