从“前锋”过渡到＃39;关键帧动画？

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