CSS3 스핀 애니메이션
나는 꽤 많은 데모를 검토했으며 왜 CSS3 스핀을 작동시킬 수 없는지 전혀 모른다. 최신 안정 버전의 Chrome을 사용하고 있습니다.
바이올린 : http://jsfiddle.net/9Ryvs/1/
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
<div></div>
CSS3 애니메이션을 사용하려면 실제 애니메이션 키 프레임 ( 이름을 지정spin
) 도 정의해야합니다.
자세한 내용은 https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations 를 참조하십시오.
애니메이션 타이밍을 구성한 후에는 애니메이션 모양을 정의해야합니다. 이것은
@keyframes
at-rule을 사용하여 둘 이상의 키 프레임을 설정하여 수행됩니다 . 각 키 프레임은 애니메이션 시퀀스 동안 애니메이션 요소가 주어진 시간에 렌더링되는 방법을 설명합니다.
http://jsfiddle.net/gaby/9Ryvs/7/의 데모
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
키 프레임을 지정하지 않았습니다. 나는 그것을 여기에서 작동 시켰다.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation: spin 4s infinite linear;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
실제로 이것으로 정말 멋진 것들을 많이 할 수 있습니다. 여기 내가 먼저 만든 것 입니다.
:)
NB -prefix-free 를 사용하면 모든 접두사를 작성하지 않아도됩니다 .
최신 Chrome / FF 및 IE11에서는 -ms / -moz / -webkit 접두사가 필요하지 않습니다. 더 짧은 코드는 다음과 같습니다 (이전 답변을 기반으로 함).
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
/* The animation part: */
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
라이브 데모 : http://jsfiddle.net/9Ryvs/3057/
글꼴이 멋진 글리프 콘이있는 HTML.
<span class="fa fa-spinner spin"></span>
CSS
@-moz-keyframes spin {
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
to {transform:rotate(360deg);}
}
.spin {
animation: spin 1000ms linear infinite;
}
회전하려면 키 프레임과 변형을 사용할 수 있습니다.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
@-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
완성을 위해 코드를 실제로 단축시키는 Sass / Compass 예제가 있습니다. 컴파일 된 CSS에는 필요한 접두어 등이 포함됩니다.
div
margin: 20px
width: 100px
height: 100px
background: #f00
+animation(spin 40000ms infinite linear)
+keyframes(spin)
from
+transform(rotate(0deg))
to
+transform(rotate(360deg))
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
이것은 당신이 질문에 대답하게 만들 것입니다
The only answer which gives the correct 359deg:
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
&.active {
animation: spin 1s linear infinite;
}
Here's a useful gradient so you can prove it is spinning (if its a circle):
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
참고URL : https://stackoverflow.com/questions/14859322/css3-spin-animation
'Programing' 카테고리의 다른 글
Netbeans에서 자동 들여 쓰기는 어떻게합니까? (0) | 2020.06.19 |
---|---|
Python '요청'모듈을 사용하는 프록시 (0) | 2020.06.19 |
웹 API 메시지 핸들러에서 사용자 정의 헤더 값을 추출하는 방법은 무엇입니까? (0) | 2020.06.19 |
테이블 셀 내용을 강제로 래핑하는 방법은 무엇입니까? (0) | 2020.06.19 |
클릭 탭시 쉘 초기화 문제, getcwd의 문제점은 무엇입니까? (0) | 2020.06.19 |