このローダーを自分の Web サイトで使用しようとしています。scc アニメーションは Firefox と IE ではうまく機能しますが、Google Chrome では機能しません。
#loader{
width: 820px;
height: 670px;
border: none;
overflow: hidden;
margin: 0px 70px;
background: #0d8aa5;
position: relative;
}
#innerloader{
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #19bee1;
}
#innerloader:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
-webkit-animation: rotate 2s infinite linear;
-moz-animation: rotate 2s infinite linear;
-ms-animation: rotate 2s infinite linear;
-o-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
HTML
<div id="loader"><div id="innerloader"></div></div>
PSここでは、Google Chromeでも正しく動作しています....