[css] CSS 애니메이션 속성이 애니메이션 후 유지됨

Program / 글쓴이

완료 후 CSS 애니메이션 속성을 유지하려고합니다. 가능합니까?

이것이 제가 이루고자하는 것입니다 …

요소는 사용자가 페이지에 도착했을 때 숨겨져 야하며, 3 초 (또는 기타) 후에 페이드 인되어야하며 애니메이션이 완료되면 그대로 유지되어야합니다.

여기 바이올린 시도가 있습니다 …
http://jsfiddle.net/GZx6F/

다음은 보존을위한 코드입니다 …

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

나는 jQuery로 이것을하는 방법을 안다. 그것은 다음과 같을 것이다.

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

답변

animation-fill-modeCSS3 속성을 찾고 있다고 생각합니다.

https://developer.mozilla.org/en/CSS/animation-fill-mode

animation-fill-mode CSS 속성은 CSS 애니메이션이 실행 전후에 대상에 스타일을 적용하는 방법을 지정합니다.

당신의 목적을 위해 설정하려고

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;
}

앞으로 값 설정 «대상은 실행 중에 발생한 마지막 키 프레임에서 설정 한 계산 된 값을 유지합니다.»

답변

받는 사람 또한 대답 의 @Fabrizio Calderan , 그것은 당신도 적용 할 수 있다고 할 수있다 animation-fill-mode속성을 forwards직접 animation. 따라서 다음도 작동합니다.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

스 니펫 확장

답변

요소에 애니메이션을 적용하고 애니메이션이 완료되는 동안 유지되도록하는 방법 :

// Beggin
#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);

  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
<div id="box"></div>

스 니펫 확장

답변

나에게도 비슷한 일이 일어났습니다. 애니메이션을 적용한 요소와 관련하여 position : relative를 추가했고 그 요소를 수정했습니다.

답변