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

动画只会运行一次

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

1 个答案: