如何僅在頁面加載時轉換圖像一次？

Question

我在定位像這樣的表的圖像：

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

這裏是CSS：

.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; 
} 

我想這個圖像過渡只有一次在最初的頁面加載。不click或hover ...

left: 16px; 

...淡入從完全無形到有形。

Answer 1

使用animation代替transition並定義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; } 
} 

動畫將只運行一次