animate.css를 사용하면 애니메이션 지연 시간을 어떻게 줄일 수 있습니까?

나는 최근 animate.css에서 제공하는 "플립 (flip)"전환을 인식하게되었습니다. 내 웹 사이트는 UI 지향적입니다. 그래서 "뒤집기"전환을 추가하여 버튼 클릭에 일생을 추가하고 싶었습니다. 플립이 발생하기 전에 버튼 클릭 후 ~ 1 초의 지연이 있다는 점을 제외하면 매우 좋습니다. animate.css를 사용하면 애니메이션 지연 시간을 어떻게 줄일 수 있습니까?

난 GitHub의에 CSS 파일을 검사하고, I는 본 유일한 시간 관련 코드였다 I는 0.5 초에 각각이 단축

.animated { 
    -webkit-animation-duration:1.0s; 
    animation-duration:1.0s; 
}

그러나 이것은 단지 애니메이션이 발생하면, 플립 더 빠르게 발생했다 .

나는 버튼

.animated.flip { 
    -webkit-animation-delay: 0.1s; 
    animation-delay: 0.1s; 
}

하지만 여전히 어떤 변화를 .animated.flip 다음 지연 관련 CSS를 추가했습니다.

또한 button.animated.flip에 동일한 CSS 규칙을 추가했지만 다시 적용되지 않습니다.

animate.css를 사용할 때 어떻게 애니메이션 지연 시간을 줄입니까?

출처

2015-02-05 The One and Only ChemistryBlob

스 니펫 또는 적어도 하나의 링크를 제공하십시오. –

어떤 브라우저를 테스트하고 있습니까? animate의 CSS 파일에서 제공되는 가능한 공급 업체 접두사 목록이 완전하지 않은 것 같아서 묻습니다. 예를 들어, MDN의 페이지는 애니메이션 기간의 접두사로 -moz-가 필요하다는 것을 나타내는 것 같습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/animation –

@Jeff Mahoney, 테스트를 마쳤습니다. FF/Chrome/IE/Opera의 모든 최신 버전 –

흠 ... 음, animate.css 및 jquery를 다운로드하고 사용했을 때 플립 천이에 클릭 버튼 지연이 발생하지 않았습니다. 나는 채찍질

내가 샘플 페이지에서 이런 식으로 전화 :

<body> 
    <button id="mybutton" onclick="flipit()">Flip It</button> 
</body> 
<script> 
    function flipit(){ 
    $('#mybutton').addClass('animated flip'); 
    } 
</script>

는 사실, 나는 내가 animate.css 파일에에 1 점을 추가하는 듯 때까지 같은 지연을 볼 수 없습니다 이합니다 (animate.css 파일에서 주변 라인 1653에) :

.animated.flip { -webkit-animation-delay: 1s; /* <-- my added delay */ -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; }

나는 맥북 프로에 크롬과 사파리에 달렸다. 샘플을 짧게 유지하기 위해 -webkit-prefaced 버전의 지연 만 포함했지만 -moz 및 -o와 함께 작동했습니다 (또한 animate.css 파일에서 제거했을 때 사라짐).

희망적으로이 부분을 밝히세요!

출처

2015-02-08 05:57:36

animate.css를 사용하면 애니메이션 지연 시간을 어떻게 줄일 수 있습니까?

답변

관련 문제