JS로 CSS 애니메이션 제어?

의 나는 다음과 같은 CSS 애니메이션 있다고 가정 해 봅시다 : 영어JS로 CSS 애니메이션 제어?

@animation experiencebar { 
    from {background:blue;width:0} 
    80% {background:blue;width:100%} 
    90% {background:yellow;opacity:1} 
    to {opacity:0} 
}

은, 바, 블루 전체에 빈에서 성장 후 페이드 아웃하기 전에 노란색 페이드.

"이 요소를 애니메이션의 50 %에있는 것처럼 스타일링"할 수있는 방법이 있습니까? (이 경우 파란색 배경과 너비 62.5 %)

그렇다면 경험을 얻은 시점에서 70 % 애니메이션으로 전환 할 수있는 등의 방법이 있습니까? 더 나아가, 애니메이션을 막대에 채우고, 페이드 아웃하고, 다음 단계에 새로운 막대를 시작하는 것처럼 보이도록 위치를 120 %로 설정할 수 있습니까?

또는 CSS 전환/애니메이션에 대해서 너무 멀리 가져 왔으며 JavaScript로 수행해야합니까?

출처

2013-01-06 Niet the Dark Absol

Kolink, 이전에 보지 못했기 때문에 백분율로 상태를 혼합 할 수 있는지 확인해야합니다. –

'from'은'0 %'의 별명이고'to'는'100 %'의 별명입니다. 그것들은 명확하게 정의되어 있습니다. –

* 글쎄, 실제로 ... * JavaScript에서 [animation-play-state] (https://developer.mozilla.org/en-US/docs)를 설정하여 CSS 애니메이션 (전환이 아닌)을 일시 중지하고 재생할 수 있습니다./CSS/애니메이션 재생 상태). 하지만 정확성을위한 올바른 방법은 아닙니다. – Ryan

지금 자바 스크립트에서 애니메이션에 액세스 할 수는 없지만이 문제에 대한 해결 방법이 있다고 생각합니다. 전환을 완전히 계산하고 사용하십시오. 다른 전환 속성을 가진 다른 클래스를 가질 수 있으며 자바 스크립트에서 원하는 클래스를 적용 할 수 있습니다. 이 메서드는 자바 스크립트에서 필요한 애니메이션을 표시합니다.

출처

2013-01-06 06:18:48 GautamJeyaraman

아, 우리는 실질적으로 같은 대답을 썼습니다. +1. –

우리가 생각할 수있는 가장 좋은 대답은 :) 바로 Bagavatu입니다. +1 – GautamJeyaraman

불행히도 언급 한 방식으로 CSS 전환을 직접 조작 할 수있는 방법은 없습니다. 다른 애니메이션을 사용하여 다른 클래스를 설정하고 .setAttribute("class","classname") 메소드를 통해 클래스를 간단하게 변경할 수 있습니다. 또한 자바 스크립트에서 특정 속성을 조작 할 수도 있지만 다시 변경해야 할 수도 있습니다. 이것은 교대 수업보다 훨씬 덜 우아합니다.

출처

2013-01-06 06:26:11

JS로 CSS 애니메이션 제어?

답변

관련 문제