动画结束后的CSS过渡 [英] CSS Transition after animation ends

问题描述

我有一个css过渡，可以在悬停时移动元素，也有一个动画，可以在悬停时旋转元素。动画的延迟时间等于过渡时间，因此在过渡到正确位置后，动画就会开始播放。而且效果很好，但是，当我们将鼠标移开时，动画会停止，但不会向下过渡。

I have a css transition that moves an element on hover and an animation that rotates the element on hover too. There's a delay on the animation equal to the transition duration so that after it's transitioned to it's correct position, the animation starts. And it works nice, however, when we mouse off, the animation stops but it doesn't transition back down.

是否有可能在我们之后将其过渡回来

Is it possible to get it to transition back after we mouse off and the animation ends?

您可以在此处看到示例： http://codepen.io/jhealey5/pen/zvXBxM

You can see an example here: http://codepen.io/jhealey5/pen/zvXBxM

此处的简化代码：

    div {
        width: 200px;
        height: 200px;
        margin: 40px auto;
        background-color: #b00;
        position: relative;

        &:hover {
            span {
                transform: translateY(-60px);
                animation-name: rotate;
                animation-duration: 1s;
                animation-delay: .5s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
        }
    }

    span {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: auto;
        transition: .5s;
    }

    @keyframes rotate {
        from {
            transform: translateY(-60px) rotate(0);
        }
        to {
            transform: translateY(-60px) rotate(-90deg);
        }
    }

推荐答案

I分叉了您的项目并对其进行了修改，使其可以正常工作。 您可以在这里找到它。

I have forked your project and adapted it so it works. You can find it here.

我更改的内容如下：

我将白色方块的起始位置设为 top：150px 并让它在 div 的悬停上，得到 top：0 。跨度得到一个过渡：top .5s ，并在悬停并返回时回到 top：0; top：150像素； 鼠标离开时。

I give the white square a start position of top: 150px and let it, on hover of div, get a top: 0. The span gets a transition: top .5s and with that it goes to top: 0; on hover and back to top: 150px; when the mouse leaves.

我删除了 translateY（- 60px）; ，因为动画会在动画开始时将其向上移动。

I have removed the translateY(-60px); from the animation, because that would move it even more up when the animation would start.

这是您的新CSS：

div {
    width: 200px;
    height: 200px;
    margin: 40px auto;
    background-color: #b00;
    position: relative;

    &:hover {
        span {
            top: 0px;
            animation: rotate 1s infinite .5s alternate;
            animation-direction: alternate;
        }
    }
}

span {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    bottom: 10px;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
    transition: top .5s;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-90deg);
    }
}

编辑：问题是动画是时间-基于动画而非基于动作的动画，这意味着一旦触发动画，计时器便开始运行，它将在所有关键帧中运行，直到经过设置的时间为止。悬停和悬停没有效果，但可以过早停止计时器，但是此后动画将不会继续（或想要反转）。 过渡基于操作，这意味着每次发生操作（例如：hover ）时都会触发该过渡。在：hover 上，这意味着需要0.5秒才能到达 top：0 ，并且当悬停结束时，它需要花费.5s到达 top：150px 。

The problem is that an animation is time-based and not action-based, which means that as soon as you trigger an animation, a timer starts running and it will run through all the keyframes until the set time has passed. Hover-in and hover-out have no effect, except that the timer can be stopped prematurely, but the animation will not continue (or reversed, which you wanted) after that. transition is action-based, which means it gets triggered every time an action (for example :hover) is happening. On :hover, this means it takes .5s to go to top:0 and when the hover ends, it takes .5s to got to top:150px.

我希望以上添加是有意义的：）

I hope the above addition makes sense :)

如您所见，我还清理了您的动画名称：等，因为它可以组合为一行。

As you can see, I also cleaned up a bit in your animation-name: etc., since it can be combined into one line.

这篇关于动画结束后的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！