如何使用 css 创建具有平滑鼠标移出效果的无限比例鼠标悬停动画？

Question

我正在编写鼠标悬停时触发的 CSS3 效果；这种效果简单地动画了一个内部 div 无限缩放它。

一切正常，但是当我将鼠标移开时，div 突然 return 回到原来的大小。我想添加平滑效果来缩小 div。

我已经检查了这个post的建议： Make CSS Hover state remain after "unhovering" 不幸的是，代码 posted 不起作用 :( 在我看来，我的问题可能与比例效应的 "infinite" 循环有关。

我想实现的目标是在鼠标移开时图像可以 return 平滑地恢复到其原始大小。

代码如下：https://jsfiddle.net/9dtqpsLa/1/

CSS

@keyframes imageZoom{
    0% { transform: scale(1); }
    50% { transform: scale(1.24); }
    100% { transform: scale(1);}
}

@-moz-keyframes imageZoom{
    0% { -moz-transform: scale(1);}
    50% { -moz-transform: scale(1.24); }
    100% { -moz-transform: scale(1); }
}

@-webkit-keyframes imageZoom{
    0% { -webkit-transform: scale(1); }
    50% {-webkit-transform: scale(1.24); }
    100% { -webkit-transform: scale(1); }
}

@-ms-keyframes imageZoom{
    0% { -ms-transform: scale(1); }
    50% { -ms-transform: scale(1.24); }
    100% { -ms-transform: scale(1); }
}

.article:hover .imageWrapper {
    animation: imageZoom linear 10s;
    animation-iteration-count: infinite;
    -webkit-animation: imageZoom linear 10s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: imageZoom linear 10s;
    -moz-animation-iteration-count: infinite;
    -ms-animation: imageZoom linear 10s;
    -ms-animation-iteration-count: infinite;
    transform-origin: 50% 80%;
}

.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
}

HTML

<div class="article">
    <div class="imageWrapper">

    </div>
</div>

拜托，你能帮帮我吗？

非常感谢

Answer 1

一旦您将鼠标移离该元素，:hover 伪 class 中的样式就会从您的元素中删除，有效地将其放回原处。

您要做的是开始和暂停动画：

这是你的fiddle，我稍微编辑了一下，把简写去掉了-webkit、-ms等：

https://jsfiddle.net/9dtqpsLa/4/

@keyframes imageZoom {
    100% {
        transform: scale(4);
    }
}
.article:hover .imageWrapper {
    animation-play-state: running;
}
.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
    transform-origin: 50% 80%;
    animation-name: imageZoom;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: both;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

请注意，所有动画逻辑都已移至底部 class，并且 :hover 只会启动动画。

Answer 2

目标：
1. 让图像在悬停时动画扩展和收缩
2. 让图像在 mouseleave

上动画到原始状态

问题：
对于 CSS，我不知道如何同时使用 animation 和 transition。 animation 是悬停时的脉动。 transition 是默认动画的 return。我能想到的唯一方法是使用 JS。请参阅每个部分的注释

https://jsfiddle.net/Bushwazi/9dtqpsLa/5/

HTML:
注意：与提供的示例相同

<div class="article">
    <div class="imageWrapper"></div>
</div>

CSS:
备注：
1. animation 已删除。
2. scale 仅在 [data-dir='expand'].
存在时触发 3. transform-origin和transition移动到默认状态.imageWrapper
4.需要加前缀

.article[data-dir='expand'] .imageWrapper {
    transform:scale(1.24)
}

.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
    transform-origin: 50% 80%;
    transition:all 10.0s linear 0.0s;
}

JAVASCRIPT:
备注：
1. 全新

/*
     1. on hover aka 'mouseenter' start the animation
     2. 10 seconds in, change direction of the animation based on the `isHovering` variable
     3. on exit aka 'mouseleave', return to default
 */


var thisArticle = document.querySelector('.article'),
    thisTimer = '',
    isHovering = false;

thisArticle.addEventListener('mouseenter', function(){
    console.log('mouseenter');
    thisArticle.setAttribute('data-dir', 'expand');
    thisTimer = setInterval(fireAnimation, 10000);
    isHovering = true
}, false);

thisArticle.addEventListener('mouseleave', function(){
    console.log('mouseleave');
    thisArticle.removeAttribute('data-dir');
    isHovering = false;
    clearInterval(thisTimer);
}, false);

var fireAnimation = function(){
    if(isHovering){
        if(thisArticle.getAttribute('data-dir') === 'expand'){
            thisArticle.removeAttribute('data-dir');
        } else {
            thisArticle.setAttribute('data-dir', 'expand');
        }
    } else {
        clearInterval(thisTimer);
    }
    alert('change direction');
}

更多想法
1. 我使用了 data 属性，但我更愿意使用 classList。不确定如何在 30 秒内将其合并到 fiddle，因此跳过它。
2.默认动画return在你离开的时候没有感知到scale，所以无论如何都要10秒。我相信有办法让它变得更好。

如何使用 css 创建具有平滑鼠标移出效果的无限比例鼠标悬停动画？

How can I create an infinite scale mouseover animation with a smooth mouseout effect with css?

css

scale