클릭시 4 부분의 CSS3 애니메이션이 재생되지만 애니메이션의 마지막 부분은 화면에서 벗어납니다.
그러나 일단 재생되면 항상 원래 상태로 돌아갑니다. 누구든지 마지막 CSS 프레임 (100 %) 에서 중지하는 방법 또는 재생 된 전체 div를 제거하는 방법을 알고 있습니다 .
@keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}답변
답변
이 animation특성을 속기 특성 정의 에 추가하려는 경우 하위 특성의 순서는 다음과 같습니다.
animation-name– 기본 none
animation-duration– 기본 0s
animation-timing-function– 기본 ease
animation-delay– 기본 0s
animation-iteration-count– 기본 1
animation-direction– 기본 normal
animation-fill-mode– 당신은 이것을 설정해야합니다 forwards
animation-play-state– 기본 running
따라서 가장 일반적인 경우 결과는 다음과 같습니다.
animation: colorchange 1s ease 0s 1 normal forwards;답변
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ animation-fill-mode: forwards;
브라우저 지원
- Chrome 43.0 (4.0-웹킷-)
- IE 10.0
- Mozilla 16.0 (5.0 -moz-)
- Shafari 4.0-웹킷-
- 오페라 15.0 -webkit- (12.112.0 -o-)
용법:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}답변
가장 좋은 방법은 최종 상태를 CSS의 주요 부분에 두는 것 같습니다. 여기 에서처럼 너비를에 넣으면 220px마침내가됩니다 220px. 그러나 시작0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
} 답변
webkitAnimationName을 아무것도 다시 설정하여 객체의 CSS를 기본 상태로 다시 설정하는 문제는 아닙니다. 상태를 재설정하는 setTimeout 함수를 제거하면 끝나지 않은 상태로 유지되지 않습니까?
답변
방금 비슷한 대답을 게시했으며 아마도 다음을 살펴보고 싶을 것입니다.
http://www.w3.org/TR/css3-animations/#animation-events-
시작 및 중지와 같은 애니메이션의 측면을 찾은 다음 ‘중지’이벤트가 시작되면 원하는 모든 것을 dom에 수행 할 수 있습니다. 나는 얼마 전에 이것을 시도했지만 작동 할 수는 있지만 당분간 웹킷으로 제한 될 것이라고 생각합니다 (그러나 아마도 이미 수락했을 것입니다). Btw, 나는 2 개의 답변에 대해 동일한 링크를 게시 했으므로이 일반적인 조언을 제공 할 것입니다 .W3C를 확인하십시오. 규칙을 작성하고 표준을 설명합니다. 또한 웹킷 개발 페이지는 매우 중요합니다.
