css3 动画问题

Question

.cl-button:hover span{
    animation:mymove 0.35s;
    -webkit-animation:mymove 0.35s; 
    -moz-animation:mymove 0.35s; 
}

@keyframes mymove
{
    0% {transform: scale(1);}
    50% {transform: scale(0.1);}
    100%{transform: scale(1);}
}

@-moz-keyframes mymove 
{
    0% {transform: scale(1);}
    50% {transform: scale(0.1);}
    100%{transform: scale(1);}
}

@-webkit-keyframes mymove 
{
    0% {-webkit-transform: scale(1);}
    50% {-webkit-transform: scale(0.1);}
    100%{-webkit-transform: scale(1);}
}

为什么这段代码只在chrome中有效，火狐、国产的一些浏览器都没效果？

Answer 1

这个问题并不是css3动画的问题，而是有关transform的。

w3c文档里有描述transformable element的概念：

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

意思是说，span这类行内非替换元素，不属于可以transform的元素。Chrome的有效只是属于各浏览器对规范的实现差异了。

把span换成块元素，或者把动画设置到外边的.cl-button（如果它是块元素的话），就可以生效。

另外，现在使用动画只用-webkit-animation和animation2个，不再需要-moz-。

Answer 2

@-moz-keyframes mymove 
{
    0% {transform: scale(1);}
    50% {transform: scale(0.1);}
    100%{transform: scale(1);}
}

里面的transform 忘记加前缀了

国产浏览器得具体看是哪个了，用了什么内核。

Answer 3

这段代码并没有问题，其他地方出问题了吧?

Answer 4

我刚解决了，是兼容的问题，三个地方要写兼容：1、animation 2、tarnsform 3、keyframes