通過純css單擊後的特定持續時間的旋轉動畫

Question

我想通過點擊圖像時觸發的純CSS3動畫，在div上顯示的圖像上旋轉動畫。 動畫shuld將持續特定的時間。

Answer 1

的一個解決方案，我能想到的觸發點擊旋轉是使用複選框黑客和keyframe animations - 見DEMO

HTML使用：

<div class='img-container'> 
    <input type='checkbox' name='t' id='t'><label for='t'></label> 
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1998-14-i-web.jpg'> 
</div> 

相關CSS：

.img-container { 
    position: relative; 
    width: 400px; 
    height: 295px; 
} 
.img-container input[type=checkbox] { display: none; } 
.img-container input[type=checkbox] + label, .img-container img { 
    position: absolute; 
    min-width: 100%; 
    height: 100%; 
} 
.img-container input[type=checkbox] + label { 
    z-index: 2; 
} 
.img-container img { z-index: 1; } 
.img-container input[type=checkbox] ~ img { animation: rev-rotate-img 1s; } 
.img-container input[type=checkbox]:checked ~ img { animation: rotate-img 1s; } 

@keyframes rotate-img { to { transform: rotate(360deg); } } 
@keyframes rev-rotate-img { to { transform: rotate(-360deg); } } 

Answer 2

嗨，現在習慣了這種它的有益你

Link one

Link two

Link Three

Answer 3

您可以將@keyframes與CSS3 animation命令結合使用。一個簡單的方法應該是這樣的：

-webkit-animation: 
    roll-over-rotate 400ms .1s 1 ease-in-out normal forwards, 
    roll-over-color 1000ms ease-out; 
-moz-animation: 
    roll-over-rotate 400ms .1s 1 ease-in-out normal forwards, 
    roll-over-color 1000ms ease-out; 

@-webkit-keyframes roll-over-rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(90deg); 
    } 
} 

@-moz-keyframes roll-over-rotate { 
    from { 
    -moz-transform: rotate(0deg); 
    } 
    to { 
    -moz-transform: rotate(90deg); 
    } 
} 

首先定義WebKit的動畫，然後提及在其中定義所需的CSS3具體效果的動畫功能。

對於一個活生生的例子，你應該檢查這個實驗的CSS部分：http://www.hellopixel.net/experiments/javascript/worley-noise/worley.html