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

Question

我在 table 中有一张图片，位置如下：

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

动画将运行只播放一次

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

How to transition an image once only when page loads?

css

dreamweaver

onload

transitions