순수 CSS를 통해 클릭하면 특정 기간 동안 순환 애니메이션

Question

이미지를 클릭하면 순수 CSS3 애니메이션을 통해 div에있는 이미지에 회전 애니메이션을 적용하고 싶습니다. 애니메이션 지속 시간은 특정 기간입니다.

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

0123이 그것의 helpfull에 사용

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); 
    } 
} 

먼저 웹킷 애니메이션을 정의한 다음 원하는 CSS3 특정 효과를 정의하는 애니메이션 기능을 참조하십시오. 이 실험의 CSS 부분을 확인해야합니다 라이브 예를 들어

: http://www.hellopixel.net/experiments/javascript/worley-noise/worley.html