現在、URL で #clock を探す :target を使用するチュートリアルに取り組んでいます。URL から #clock を削除して index.html だけを使用したいのですが、アニメーションがまだ機能するように css を更新する方法がわかりません。誰でもアドバイスできますか?遷移コードと変換コードを組み合わせてみましたが、うまくいきませんでした。
CSS
#clock img[src*='second'] {
-webkit-transition: -webkit-transform 600000s linear;
-moz-transition: -moz-transform 600000s linear;
-o-transition: -o-transform 600000s linear;
-ms-transition: -ms-transform 600000s linear;
transition: transform 600000s linear;
}
#clock:target img[src*='second'] {
-webkit-transform: rotate(3600000deg);
-moz-transform: rotate(3600000deg);
-o-transform: rotate(3600000deg);
-ms-transform: rotate(3600000deg);
-transform: rotate(3600000deg);
}
HTML
<div id="experiment">
<p class="start"><a href="#clock" id="start">Start Clock</a></p>
<div id="clock">
<div id="hour"><img src="img/hourHand.png" /></div>
<div id="minute"><img src="img/minuteHand.png" /></div>
<div id="second"><img src="img/secondHand.png" /></div>
</div>
</div>
更新しました
#clock #second img {-webkit-animation: loading 1000s infinite;}
@keyframes loading{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(3600000deg);}
}