.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中有效,火狐、国产的一些浏览器都没效果?
@-moz-keyframes mymove
{
0% {transform: scale(1);}
50% {transform: scale(0.1);}
100%{transform: scale(1);}
}
里面的transform 忘记加前缀了
国产浏览器得具体看是哪个了,用了什么内核。
这段代码并没有问题,其他地方出问题了吧?
我刚解决了,是兼容的问题,三个地方要写兼容:1、animation 2、tarnsform 3、keyframes
这个问题并不是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
和animation
2个,不再需要-moz-
。