CSS3 스핀 애니메이션

CSS3 스핀 애니메이션

저는 꽤 많은 데모를 검토했는데 왜 CSS3 스핀이 작동하지 않는지 모르겠습니다.저는 크롬의 최신 안정적인 릴리스를 사용하고 있습니다.

바이올린: 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 애니메이션을 사용하려면 실제 애니메이션 키 프레임(이름 지정)도 정의해야 합니다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations 을 참조하십시오.

애니메이션의 타이밍을 구성했으면 애니메이션의 모양을 정의해야 합니다.이 작업은 at 규칙을 사용하여 두 개 이상의 키 프레임을 설정하여 수행합니다.각 키 프레임은 애니메이션 시퀀스 중 특정 시간에 애니메이션 요소가 렌더링되는 방식을 설명합니다.

---

데모:

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-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></div>

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

이것으로 정말 멋진 일들을 많이 할 수 있습니다.여기 제가 아까 만든 것이 있습니다.

:)

N.B. -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;
}

올바른 359deg를 제공하는 유일한 답은 다음과 같습니다.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

다음은 회전 중임을 증명할 수 있는 유용한 그라데이션입니다(원일 경우).

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

회전하려면 키 프레임과 변환을 사용할 수 있습니다.

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

이것은 당신이 질문에 대답하도록 만들 것입니다.

여전히 멋지고 쉬운 스피너를 찾는 사람들을 위해, 우리는 폰타썸 사이트에서 스피너의 여러 예를 가지고 있습니다: https://fontawesome.com/v4.7.0/examples/ .

당신은 디버거로 당신이 원하는 스피너를 검사하고 css 스타일을 복사하기만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/14859322/css3-spin-animation