CSS3 에니메이션/페이드

Question

안녕하세요, 3 초 후에 다른 이미지로 자동 페이드를하려고합니다. 두 번째 이미지가 100 % 불투명도가되면 루프를 유지하고 유지해야합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

DEMO

CSS :

/*Add required verdon prefixes*/ 
img{ 
    width:300px; height:300px; 
    display:block; 

    /* Background in place of `src` attribute*/ 
    background:url("http://placehold.it/200x200"); 

    opacity:0; 

    /*`fade` = name; `3s` = duration; `1` - number of times animation takes place*/ 
    -webkit-animation:fade 3s 1; 
    -moz-animation:fade 3s 1; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
} 

@-webkit-keyframes fade{ 
    to{ 
     opacity:1; 
     background:url("http://placehold.it/250x200"); 
    } 
} 

@-moz-keyframes fade{ 
    to{ 
     opacity:1; 
     background:url("http://placehold.it/250x200"); 
    } 
} 

사용

중요 재산 :

이

animation-fill-mode - "애니메이션 채우기 모드 CSS 속성이 지정에게 CSS 애니메이션을 적용하는 방법 스타일이 실행되기 전과 후에 대상에 적용됩니다. "
forwards을 값으로 설정하면 획득 한 최종 속성을 요소에 그대로 유지합니다.