Webkit動畫和變換

Question

我目前在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); 
    }; 
} 

Answer 1

你需要括號後刪除分號，它會工作

Demo

100% { 
    -moz-transform: rotate(360deg); 
}; /* <--- Invalid, need to get rid of those */ 

BTW，漂亮的動畫。

完整代碼

.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); 
    } 
}