[css] CSS3 애니메이션 종료시 최종 상태 유지

Program / 글쓴이

opacity: 0;CSS에 설정된 일부 요소에서 애니메이션을 실행하고 있습니다. 애니메이션 클래스는 onClick에 적용되며 키 프레임을 사용하여 불투명도 0를 1(다른 것들 중에서) 로 변경합니다 .

불행히도 애니메이션이 끝나면 요소 opacity: 0는 Firefox 및 Chrome 으로 돌아갑니다 . 저의 자연스러운 생각은 애니메이션 요소가 최종 상태를 유지하면서 원래 속성을 무시한다는 것입니다. 이것이 사실이 아닙니까? 그렇지 않은 경우 요소를 어떻게 얻을 수 있습니까?

코드 (접두사 버전은 포함되지 않음) :

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

답변

를 추가해보십시오 animation-fill-mode: forwards;. 예를 들면 다음과 같습니다.

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

답변

더 많은 애니메이션 속성을 사용하는 경우 속기는 다음과 같습니다.

animation: bubble 2s linear 0.5s 1 normal forwards;

이것은 다음을 제공합니다.

  • 2s 지속
  • linear 타이밍 기능
  • 0.5s 지연
  • 1 반복 횟수 (무한 수)
  • normal 방향
  • forwards 채우기 모드 (종료 위치를 최종 상태로 사용하기 위해 호환성을 원하면 뒤로 설정)

답변

IF는 짧은 손 버전을 사용하지 : 만들기 확실히는 animation-fill-mode: forwards것입니다 후에 애니메이션 선언 또는 작동하지 않습니다 …

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

답변

사용
애니메이션 채우기 모드 : 전달;

animation-fill-mode: forwards;

요소는 마지막 키 프레임에서 설정 한 스타일 값을 유지합니다 (애니메이션 방향 및 애니메이션 반복 횟수에 따라 다름).

참고 : @keyframes 규칙은 Internet Explorer 9 및 이전 버전에서는 지원되지 않습니다.

작업 예

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble;
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>

스 니펫 확장

답변