css 完成后保持动画

Question

例如，我将比例从 1 调整为 2，我想让它在比例达到 2 时保持不变，例如，当用户将鼠标悬停在某个图像上时，它会被缩放，这可能吗？

@-webkit-keyframes scale {
    from {
        transform: scale(1);
        -ms-transform: scale(1); /* IE 9 */
        -webkit-transform: scale(1); /* Safari and Chrome */
    }
    to {
        transform: scale(1.5);
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Safari and Chrome */
    }
}
@keyframes scale {
    from {
        transform: scale(1);
        -ms-transform: scale(1); /* IE 9 */
        -webkit-transform: scale(1); /* Safari and Chrome */
    }
    to {
        transform: scale(1.5);
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Safari and Chrome */
    }
}

div.item:hover
{
animation: scale 2s;
-webkit-animation: scale 2s;
}

Answer 1

使用animation-fill-mode:forwards or both

div.item:hover
{
animation: scale 2s forwards;
-webkit-animation: scale 2s forwards;
}