Webkit 动画和变换
Posted
技术标签:
【中文标题】Webkit 动画和变换【英文标题】:Webkit Animation and transform 【发布时间】:2013-06-29 11:25:07 【问题描述】:我目前在 Chrome 上实现加载器 CSS 时遇到问题。
我发布了 jsFiddle。
在 Chrome 中没有任何反应,但在 Mozilla 上运行良好。
感谢您的帮助
http://jsfiddle.net/Tpf9X/
html:
<div class="ball"></div>
<div class="ball1"></div>
CSS
.ball
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
.ball1
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoff .5s infinite linear;
-webkit-animation: spinoff .5s infinite linear;
@-moz-keyframes spin
0%
-moz-transform: rotate(0deg);
100%
-moz-transform: rotate(360deg);
;
@-moz-keyframes spinoff
0%
-moz-transform: rotate(0deg);
100%
-moz-transform: rotate(-360deg);
;
@-webkit-keyframes spin
0%
-webkit-transform: rotate(0deg);
100%
-webkit-transform: rotate(360deg);
;
@-webkit-keyframes spinoff
0%
-webkit-transform: rotate(0deg);
100%
-webkit-transform: rotate(-360deg);
;
【问题讨论】:
【参考方案1】:大括号后面的分号需要去掉,这样就可以了
Demo
100%
-moz-transform: rotate(360deg);
; /* <--- Invalid, need to get rid of those */
顺便说一句,漂亮的动画。
完整代码
.ball
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
.ball1
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoff .5s infinite linear;
-webkit-animation: spinoff .5s infinite linear;
@-moz-keyframes spin
0%
-moz-transform: rotate(0deg);
100%
-moz-transform: rotate(360deg);
@-moz-keyframes spinoff
0%
-moz-transform: rotate(0deg);
100%
-moz-transform: rotate(-360deg);
@-webkit-keyframes spin
0%
-webkit-transform: rotate(0deg);
100%
-webkit-transform: rotate(360deg);
@-webkit-keyframes spinoff
0%
-webkit-transform: rotate(0deg);
100%
-webkit-transform: rotate(-360deg);
【讨论】:
以上是关于Webkit 动画和变换的主要内容,如果未能解决你的问题,请参考以下文章
用于动画关键帧的 Sass Mixin,包括多个阶段和变换属性