css3 애니메이션 일시 정지 및 다시 시작
div{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari Chrome */
}
애니메이션 요소 노드에 대응하는 동적 증가를 통해 이 스타일을 삭제하면 애니메이션의 시작과 정지를 제어할 수 있어 매우 간단하다.
구문
animation-play-state: paused|running;
paused에서 애니메이션을 정지시켰습니다.running 규정 애니메이션이 재생 중입니다.
호환성:
Internet Explorer 10, Firefox 및 Opera는 animation-play-state 속성을 지원합니다.Safari와 Chrome는 대체 - webkit-animation-play-state 속성을 지원합니다.
참고:
iOS 8-9 Safari,ios11 시스템, 위챗 브라우저가 안 되면 애니메이션 시작을 멈출 수 없습니다.
해결 방법은 **-webkit-animation:none!important; -webkit-animation-play-state:paused;**
.no-animation {
-webkit-animation：none！important;
}
좋은 웹 전방 개발 엔지니어는 지식 체계에 있어 넓고 깊이가 있어야 하기 때문에 많은 대기업들이 높은 봉급을 내더라도 이상적인 전방 개발 엔지니어를 모집하기 어렵다.그러면 어떻게 기업의 실용적인 웹 프런트 기술을 체계적으로 학습할 수 있습니까? 이를 위해 웹 프런트의 생방송 수업 학습 스커트를 구축했습니다. 웹 프런트 앞의 숫자는 7, 6, 7, 웹 프런트 중간의 숫자는 2, 7, 3, 웹 프런트 마지막은 0, 2, 숫자를 연결하면 됩니다.진정으로 배우고 싶은 것은 들어갈 수 있고, 간장을 치는 사람은 모두의 시간을 낭비하지 마라.지금 말하는 중점은 기술을 설명하는 것이 아니라 기교에 대한 설명에 더욱 치중하는 것이다.기술은 흑백이 아니라 옳고 그름만 있고 기교는 지혜를 본다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
