Css3比例动画不起作用

Question

这是我的css，

div {
    background-image: url(some url);
    width:100px;
    height:100px;
    background-size:cover;
}

.animate {
    animation:changeSize 3s 1;
}
@keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}

使用Jquery点击按钮我只是将类animate切换到div。但它似乎不起作用。我是css3动画的新手，我不知道如何调试它。在这种情况下，任何线索对我都有帮助。

DEMO

Answer 1

嗨，它仅适用于firefox，你必须为webkit浏览器添加供应商前缀

@-webkit-keyframes

这里是

@keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}
@-webkit-keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}

检查小提琴 Fiddle

并向您需要的div添加转换。

Answer 2

您可以使用css3动画填充属性

.animate {
    animation:changeSize 3s 1 forwards;
}

请找到jsfiddle链接http://jsfiddle.net/FLG4D/16/

在这里，我玩过＃34;背景＆＃34;类以及切换回来也会很顺利

类似问题Can't stop css animation disappearing after last key frame

希望它有所帮助！