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

Question

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

一切都很好，但是当我将鼠标移开时，div 突然恢复到原来的大小。我想添加一个平滑的效果来缩小 div。

我已经检查了这篇文章的建议： Make CSS Hover state remain after "unhovering" 不幸的是，发布的代码不起作用:( 在我看来，我的问题可能与规模效应的“无限”循环有关。

我想要达到的目标是鼠标移出时图像可以顺利恢复到原始大小。

这是代码：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

目标：
1. 让图像在悬停时动画展开和收缩
2.在鼠标离开时让图像动画到原始状态

问题：
使用 CSS，我不知道如何同时使用 animation 和 transition。 animation 是悬停时的脉动。 transition 是返回默认动画。我能想到的唯一方法是使用 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 秒内将其合并到小提琴中，所以跳过了。
2. 恢复默认动画在你离开时不知道scale，所以不管怎样都需要10秒。我确信有办法让这变得更好。

Answer 2

一旦您将鼠标从元素上移开， :hover 伪类中的样式就会从您的元素中移除，从而有效地将其放回原处。

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

这是你的小提琴，我稍微编辑了一下，分解了简写并删除了 -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;
}

请注意，所有动画逻辑都已移至基类，并且 :hover 仅启动动画。