html - 从 'forwards' 关键帧动画过渡出来？

Question

我用 CSS 创建了一个关键帧动画，它将 div 的大小调整为给定的大小，我希望它在之后转换回正常大小。

问题在于该元素将简单地跳回其原始大小，即使它的“transition”属性设置为“all”也是如此。

div {
    background:red;
    width:100px;
    height:100px;
    -webkit-transition:all 200ms ease;
}
div:hover {
    -webkit-animation: test 200ms forwards;
}
@-webkit-keyframes test {
    from {
        width:100px;
        height:100px;
    }
    to {
        width:200px;
        height:200px;
    }
}

Demo

提前致谢!

Answer 1

注意 css 动画 !== css 过渡。动画用于在多个帧的整个过程中表达变化，过渡是一个简单的 a 到 b 动画。因此，这两个属性虽然用于类似目的，但与同一过程无关。

如果您只是简单地“动画化”可伸缩属性的起点和终点，您只想使用过渡:

Demo Fiddle

div {
    background:red;
    width:100px;
    height:100px;
    -webkit-transition:all 200ms ease;
}
div:hover {
    width:200px;
    height:200px;
}

要单独使用动画来完成此操作，您可以使用:

Demo Fiddle

div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: out 200ms forwards;
}
div:hover {
    -webkit-animation: in 200ms forwards;
}
@-webkit-keyframes in {
    from {
        width:100px;
        height:100px;
    }
    to {
        width:200px;
        height:200px;
    }
}
@-webkit-keyframes out {
    from {
        width:200px;
        height:200px;
    }
    to {
        width:100px;
        height:100px;
    }
}