Firefox css3 animations
Firefox css3 animations
我听说过在firefox中实现css3动画的技巧。我做了一些研究,但一无所获。在座的各位知道如何在firefox和opera中实现css3动画吗?我真的很感激!谢谢
编辑:
#pictureMove {
-webkit-animation:pictureTransition 25s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name:pictureTransition;
-moz-animation-duration::25s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes pictureTransition {
from,5% {-webkit-transform:translateX(0px);-moz-transform:translate(0px);}
10%,25% {-webkit-transform:translateX(-1024px);-moz-transform:translate(-1024px);}
30%,45% {-webkit-transform:translateX(-2048px);-moz-transform:translate(-2048px);}
50%,65% {-webkit-transform:translateX(-3072px);-moz-transform:translate(-3072px);}
70%,85% {-webkit-transform:translateX(-4096px);-moz-transform:translate(-4096px);}
90%,to {-webkit-transform:translateX(-5120px);-moz-transform:translate(-5120px);}
}
@-moz-keyframes pictureTransition {
from,5% {-moz-transform:translateX(0px);}
10%,25% {-moz-transform:translateX(-1024px);}
30%,45% {-moz-transform:translateX(-2048px);}
50%,65% {-moz-transform:translateX(-3072px);}
70%,85% {-moz-transform:translateX(-4096px);}
90%,to {-moz-transform:translateX(-5120px);}
}
Firefox支持动画:
具体来说,Firefox 4+支持CSS转换,Firefox 5+支持关键帧
文档:
- https://developer.mozilla.org/en/CSS/CSS_transitions
- https://developer.mozilla.org/en/CSS/@关键帧
示例:
- http://hacks.mozilla.org/2011/05/advanced-animations-in-aurora-with-css3-animations/
- http://paulrouget.com/e/css3animations/
相关文章:
- 关键帧之间的css3动画延迟
- 尝试创建一个具有z-index的堆叠菜单'使用HTML5/CSS3/JS
- 计算CSS3缩放框在另一个框中的最高位置
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- 下降区内的CSS3过渡
- 访问css3动画的关键帧
- CSS3:当页面向下滚动到第一个视口时,是否可以在元素上触发转换
- css3转换和javascript出错
- CSS3动画图像质量按比例
- CSS3卡翻转动画,检测是否不支持
- HTML5、CSS3和/或JS中旋转CD上的音频播放器
- jQuery鼠标输出调用CSS3动画
- 使用带有onclick事件的Javascript启动CSS3动画
- Jquery and CSS3 Rotation
- 仅限滑动图像css3或需要javascript
- 如何在不使用css转换的情况下将jQuery animate与css3属性相结合
- DIV不会与实验性CSS3菜单一起定位
- JavaScript应用CSS3渐变
- Jerky animations - Jquery / CSS3
- Firefox css3 animations