-2

웹상의 애니메이션에 관해서는 꽤 초보자입니다. mp3를 스트리밍하고 클릭 할 때 끊임없이 회전하는 jpg를 어떻게 사용할 수 있는지 알고 있다면 궁금합니다. . 나는 그것이 html5 캔버스 또는 CSS3 전환으로 할 수 asume? 하지만 난 천천히 끊임없이 회전하고 싶을 때 특히 이것을 실행하는 방법에 대한 단서가 없습니다. 어떤 도움이 대단히 감사합니다!html 5 캔버스 또는 css3로 jpg 회전하기

+0

전환이 아닌 CSS3 애니메이션이 필요합니다. – BigBalli

답변

0

당신은 CSS3의 animation 기능을 사용할 수 있습니다

.spinning { 
    animation-name: rotate; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 

을 모든 사용자가 회전 할 객체에 바로 회전 클래스를 추가합니다. 애니메이션을 더 느리게 또는 더 빠르게 만들려면 animation-duration 속성을 변경하십시오. 모든 CSS3 속성에 '-moz', '-o', '-webkit'이라는 접두사 접두어를 추가해야합니다. 예를 들어 FF의 경우

.spinning { 
    -moz-animation-name: rotate; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
} 
@-moz-keyframes rotate { 
    0% { 
    -moz-transform: rotate(0deg); 
    } 
    100% { 
    -moz-transform: rotate(360deg); 
    } 
} 

이 필요합니다.