动画结束后的CSS转换

我有一个css转换，可以在悬停时移动元素，还有一个动画可以在悬停时旋转元素。动画上的延迟等于过渡持续时间，因此在过渡到正确位置后，动画开始。但是，当我们关闭鼠标时，动画会停止，但不会向下转换

在鼠标离开并且动画结束后，是否有可能使其返回到过渡状态

您可以在此处看到一个示例：

简化代码如下：

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

同样，问题是您正在为同一属性设置动画/转换，在本例中为

transform

。看起来Chrome/FF的当前版本将允许

动画

控制属性，从而打破

转换

。解决这个问题的唯一方法似乎是转换/动画不同的属性。由于需要继续旋转元素，因此可以通过更改

bottom

属性来平移/定位元素。我知道这不会产生完全相同的结果，但是，它确实会移动元素（只是不相对于父元素）

---

或者，您也可以包装

span

元素，然后转换该元素

在下面的示例中，悬停时将

.wrapper

元素转换为

translateY（-60px）

，然后旋转子

span

元素并保持动画

div{
宽度：200px；
高度：200px；
利润率：40px自动；
背景色：#b00；
位置：相对位置；
}
div:hover.wrapper{
转换：translateY（-60px）；
}
div:hover.wrapper-span{
动画名称：旋转；
动画持续时间：1s；
动画延迟：.5s；
动画迭代次数：无限；
动画方向：交替；
}
.包装纸{
显示：内联块；
过渡：.5s；
位置：绝对位置；
底部：10px；
左：0；
右：0；
文本对齐：居中；
}
.包装跨度{
显示：内联块；
宽度：20px；
高度：20px；
背景色：#fff；
}
@关键帧旋转{
从{
变换：旋转（0）；
}
到{
变换：旋转（-90度）；
}
}

---

我已经将你的项目分成了两部分，并对其进行了调整，使其能够正常工作

我所做的改变如下：

我给白色方块一个起始位置

top:150px

，让它在

div

的

上悬停，得到一个
top:0
。span获得一个
转换：top.5s
，并随之进入
top:0悬停并返回顶部：150px当鼠标离开时

我已经删除了
translateY（-60px）动画
开始时，它会向上移动得更高

以下是您的新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
上，这意味着需要.5s才能到达
顶部：0
，当悬停结束时，需要.5s才能到达
顶部：150px

我希望上面的补充有意义：）

正如你所见，我还清理了你的
动画名称：
等，因为它可以组合成一行。
我使用的是稍旧的Chrome版本，它也不会在悬停时转换（动画效果很好），我认为它在Chrome上不起作用的原因是，动画和过渡都应用于相同的属性（如前所述）。我认为您最好同时使用动画本身。或者，另一种选择是使用
底部
进行
转换
，而
动画
仅用于
旋转
，如中所示。我不确定这种方法是否适合你的需要。如果有，请告诉我，我将添加为答案。干杯，我确实尝试将top属性与translate分开设置动画，但是直到我将默认top设置为0，它才起作用。这不是制作top动画的理想方法，但我也无法访问dom来包装它。至少现在工作：）这是另一个已知的问题。浏览器不会转换属性值，除非我们有如中所述的初始值。这个问题不仅仅是Firefox的问题，正如标题所示。很好，Josh。我们似乎又有了相同的想法：）我刚刚在评论中链接了一些类似的东西。@evu我刚刚更新了答案。您可以包装
span
元素，然后对父元素应用转换转换，同时在子元素上保持旋转动画。您的更新似乎过于复杂？或者这仅仅是我的问题？在转换top（或bottom，在您的情况下）时添加一个全新的div就足够了？如果使用
transform:
很重要，我认为这是必要的，但是将
translateY（-60px）
更改为
top:0似乎不是问题@rvervourt同意。但尽管如此，我还是想证明，在生成相同输出的同时，仍然可以对
transform
属性进行转换/设置动画。例如，如果我们想使用
transform:scaleX（2）
进行缩放转换，并用其他东西设置
transform
属性的动画，那么我们就没有其他选择了，这个方法可以解决这个问题。是的，在我看来（转换定位属性）是最佳选择，因为
动画
和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);
    }
}