Webkit CSS 애니메이션 문제-애니메이션의 최종 상태를 유지합니까?

Webkit CSS 애니메이션 문제-애니메이션의 최종 상태를 유지합니까?

---

이 질문에 이미 답변이 있습니다.

• CSS3 애니메이션 끝에서 최종 상태 유지하기 4 답변

다음 CSS3 애니메이션이 주어지면 ....

<style type="text/css" media="screen">

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}
</style>

<div class="drop_box">  
    Hello world
</div>

Hello World 텍스트가 예상대로 100px 아래로 두 번 누르세요. 그러나 애니메이션이 원래 위치로 다시 이동합니다.

분명히 이것은 CSSland에서 의미가 있습니다. 애니메이션이 적용되는 것이 더 이상 요소에 작용하지 않습니다. 그래도 약간 이상해 시청. 확실히 요소를 제자리에 애니메이션화하면 배치가 지속될 예정일 수있는 예상 할 수 있습니까?

변경된 속성을 수정하기 위해 애니메이션 끝의 요소에 클래스 이름이나 스타일을 태그하기 위해 자바 확장에 의존하지 않고 끝 위치를 '고정'으로 만드는 방법이 있습니까? 전환이 지속되는 것입니다. 전환이 필요한 제어 수준을 의미하지 않습니다. 이것이 바로 거기에 복잡한 애니메이션은 원래 상태로 돌아가는 순환 프로세스에만 사용되는 것입니다.

---

클래스에서 종료 상태를 정의하면 예제에서 원하는대로 수행해야합니다.

.drop_box {
    -webkit-transform: translateY(100px);
    -webkit-animation-name: drop;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
}

그러나 약간의 애니메이션이 이벤트 기반이라면 결국 약간의 JavaScript를 할 것입니다. 가장 쉬운 방법은 종료 상태가있는 클래스를 추가하여 애니메이션이 시작하는 것입니다.

-편집하다

2012 년 4 월 WD에 추가 된 부동산 에 대한 정보는 디노의 답변 을 참조하십시오 .animation-fill-mode

---

-webkit-animation-fill-mode를 사용하여 종료 상태를 유지하거나 시작 상태를 뒤로 확장 할 수도 있습니다. 얼마 전에 WebKit에 추가 지원 iOS 4 및 Safari 5.

-webkit-animation-fill-mode: forwards;

---

여기에 훌륭한 답변을 추가하기 위해 CSS3 전환을 처리하는 jQuery Transit 과 같은 자바 펼쳐 프레임 워크를 사용할 수 있습니다.

얼마나 많은 전환 / 효과를 수행할지에 따라 모든 효과를 포함하는 큰 CSS 파일을 유지하는 것보다 코드를 깔끔하게 유지하는 데 더 나은 솔루션이 될 수 있습니다.

이것은 당신이 원하는 것을 달성하는 매우 간단한 한 줄입니다.

자바 펼쳐 :

$(".drop_box").transition({y: "+=100px"}, 2000);

JS Fiddle 시험

---

나는 당신이 찾고있을 수 있다고 생각합니다.

0% {
  -webkit-transform: translateY(0px);
}

100% {
  -webkit-transform: translateY(100px);
}

이것은 올바른 위치에 두어야합니다.

---

이 작업을 수행하는 또 다른 방법은 킥을 위해

    <style type="text/css" media="screen">

.drop_box {
   position:absolute;
   top:100px;
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
  -webkit-transform: translateY(-100px);
  }

  to {
  -webkit-transform: translateY(0px);
  }

}
</style>

<div class="drop_box">  
Hello world
</div>

참고 URL : https://stackoverflow.com/questions/3273478/webkit-css-animation-issue-persisting-the-end-state-of-the-animation