ins*_*ere 6 css3 css-animations
目前我必须列出所有变化:
@-webkit-keyframes show {
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: rgba(0, 0, 0, 0.8); }
}
@-moz-keyframes show {
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: rgba(0, 0, 0, 0.8); }
}
[…]
Run Code Online (Sandbox Code Playgroud)
你明白了.有没有办法写这个更短?像这样的东西没有破坏它:
@-webkit-keyframes show, @-moz-keyframes show {}
Run Code Online (Sandbox Code Playgroud)
在CSS中本身不是,但你可以通过使用CSS预处理器来实现这一点,例如LESS支持"mixins"的概念来删除一些重复.
可在此处找到更多信息,特别是文章中的示例:
@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}
.mixi-frames () {
from {width: 254px;}
to {width: 512px;}
}
Run Code Online (Sandbox Code Playgroud)