1

現在、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);}
}
4

0 に答える 0