html - 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 Fiddle

并向您需要的 div 添加过渡。