CSS3の問題画像なしのスピナーのローディング

Question

私はCSSの経験があまりありません。 HTML5 Webアプリケーションを作成しました。いくつかの読み込みアクティビティをページに表示するために、私はこのブログのCSSを使用しました：CSS3 loading spinners without images。著者は、イメージなしでローディング画面を作成する方法を示しました。私はいくつかの余分なdivで正確なCSS3コードを使用しました。しかし、どういうわけか、私のページの中で使用されたときに、バーの1つが正しく整列されていません。下の画像のように、私はプログレスバーを取得：

とCSS & HTMLは以下の通りである：「BAR1は」適切上記に整列されていないものであると

<div id="mainSpinnerDiv_aims"> 
<div id="spinnerDiv_aims"> 
    <div class="bar1_aims"></div> 
    <div class="bar2_aims"></div> 
    <div class="bar3_aims"></div> 
    <div class="bar4_aims"></div> 
    <div class="bar5_aims"></div> 
    <div class="bar6_aims"></div> 
    <div class="bar7_aims"></div> 
    <div class="bar8_aims"></div> 
</div> 
<p id="waitText_aims"> please wait... </p>  
</div> 


.bar1_aims { 
    -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; 
} 
.bar2_aims { 
    -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; 
} 
.bar3_aims { 
    -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; 
} 
.bar4_aims { 
    -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; 
} 
.bar5_aims { 
    -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; 
} 
.bar6_aims { 
    -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; 
} 
.bar7_aims { 
    -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; 
} 
.bar8_aims { 
    -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; 
} 


#mainSpinnerDiv_aims{ 
margin-top:70px; 
width: 100%; 
text-align:center; 
} 

#spinnerDiv_aims{ 
    position:relative; 
    width:100px; 
    height:100px; 
    display: inline-block; 
    -webkit-animation-name: rotateSpinner; 
    -webkit-animation-duration:1.3s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
} 

#waitText_aims { 
font-weight:600; 
} 

#spinnerDiv_aims div{ 
width:10px; 
height:30px; 
background:#a00; 
position:absolute; 
top:35px; 
left:45px; 
} 

@-webkit-keyframes rotateSpinner { 
    from {-webkit-transform:scale(0.25) rotate(0deg);} 
    to {-webkit-transform:scale(0.25) rotate(360deg);} 
} 

注意数字。

編集：迅速な対応のための

みんなありがとう。最後に私は問題を理解しました。 .bar1_aims {}スタイルの直前にいくつかのコメントがあったことが判明しました。それは適切にコメントされていませんでした。だから、bar1だけが台無しにされたのです。今解決されました。

Answer 1

あなたの問題を引き起こしている原因はマークアップです。それは奇妙な ';どこでもあります。 http://jsfiddle.net/87Rbs/

Answer 2

私はHTTPリクエストを減らしてパフォーマンスを向上させるためにイメージ以上のCSSを使用することを理解していますが、アニメーション化された小さな.gifファイルをjavascriptアニメーション化する機能は無意味に見える。

他のものが読み込まれるのを待っている間にのみ使用されると考えると、皮肉なことです。

<img src="/ajax-loader.gif" alt="Loading..." />