페이지가로드 될 때만 이미지를 한 번 전환하는 방법은 무엇입니까?

Question

나는 같은 위치 테이블에 이미지가 :

.homeimg { 
    position: absolute; 
    background-image: url(../images/home/dress.png); 
    background-repeat: no-repeat; 
    top: 97px; 
    left: 500px; 
    width: 138px; 
    max-height: 344px; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 

나는이 이미지는 한 번만 때 초기 페이지가로드를 전환하려면 : 여기

<img src="images/home/dress.png" alt="dress" width="138" height="344" class="homeimg"> 

는 CSS입니다. 하지 click 또는 hover ...

left: 16px; 

... 완전히 보이지 않는에서 볼에 페이드에.

Answer 1

사용 대신 transition의 animation과 마지막 애니메이션 프레임을

예 유지 animation-fill-mode: forwards을 정의 http://codepen.io/anon/pen/RNpyvm

.homeimg { 
    position: absolute; 
    ... 
    -webkit-animation: appear 1s; 
    animation: appear 1s; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes appear { 
    0% { left: 500px; opacity: 0; } 
    100% { left: 16px; opacity: 1; } 
} 

@keyframes appear { 
    0% { left: 500px; opacity: 0; } 
    100% { left: 16px; opacity: 1; } 
} 

애니메이션이 실행됩니다 번만