如何仅在页面加载时转换图像一次？

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

动画将只运行一次