Img 속성이 CSS 애니메이션이 끝날 때까지 지속되지 않습니다.

Question

텍스트가 포함 된 DIV 위에 구름 모양의 이미지가 생기는 애니메이션을 만들고 싶습니다.

나는이 스레드 css3 transition animation on load? 거의 내가 원하는 것을하는 ...

구름이 X 축을 따라 변환 및 불투명도가 0.95로 0.2 제기를 따랐다.

@keyframes animnuage { 
     0% { 
      transform: translateX(40px); 
      opacity: 0.2; 
     } 
     100% { 
      transform: translateX(0px); 
      opacity: 0.95; 
     } 

#nuageimage { 
      width: 180px;; 
      animation-name: animnuage; 
      animation-iteration-count: 1; 
      animation-timing-function: ease-out; 
      animation-duration: 2.5s; 
      animation-delay: 0.2s; 
     } 

비록 한 문제 (#nuageimage ID 임) 이미지가 사라지고 애니메이션을 시작하기 전에, 순식간 볼되고있는 애니메이션의 시작.

이 문제를 해결하기 위해 opacity: 0을 #nuageimage로 설정했습니다. 어떤 속임수. 그러나 다른 문제가 나타납니다. 애니메이션 끝 부분에 설정된 0.95 불투명도가 유지되지 않고 애니메이션이 끝날 때 구름이 사라집니다.

CSS 또는 JS의 모든 솔루션은 무엇입니까?

Answer 1

설정 animation-fill-mode: forwards :

대상이 실행 중 발생하는 마지막 키 프레임에 의해 설정된 계산 된 값을 유지합니다.