Css3缩放动画不起作用答案

【问题标题】：Css3 scale animation not workingCss3缩放动画不起作用
【发布时间】：2015-12-11 23:30:49
【问题描述】：

这是我拥有的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

【问题讨论】：

标签： html css css-animations

【解决方案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。

【讨论】：

【解决方案2】：

你可以玩css3动画填充属性

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

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

在这里我也玩过“backanimate”类，所以切换回来也会很流畅

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

希望对你有帮助！

【讨论】：