Question

我知道我没有正确使用CSS动画，但我很难找到能够满足我需要的网络工具包转换。我需要图像（enter_button.png）以0％不透明度加载，然后在3秒后淡入实心100％图像。我目前的代码是，

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>denby</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper_index">
            <div id="enter_button"> 
                <img src="images/enter_button.png" width="138" height="50" class="withfadeout" /> 
            </div>
        </div>
    </body>
</html>

CSS：

@charset "utf-8";
.withfadeout { 
    -webkit-transition: all 2s ease-in-out; 
    -moz-transition: all 2s ease-in-out; 
    -ms-transition: all 2s ease-in-out; 
    -o-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out; 
} 
.withfadeout:hover { 
    -webkit-opacity: 0.25; 
    -moz-opacity: 0.25; 
    opacity: 0.25; 
}
#wrapper_index {
    height: 686px;
    width: 1024px;
    background-color: #000;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    background-image: url(images/entry_image-01.png);
    background-repeat: no-repeat;
    position: relative;
}
#enter_button {
    width: 140px;
    position: absolute;
    left: 431px;
    top: 413px;
}

任何帮助将不胜感激。

Answer 1

您可以使用CSS3动画来实现此目的。

＆＃13;

img { /* using generic img tag selector only for demo, change selector as appropriate */
  opacity: 0;
  -webkit-animation: load 3s 3s linear forwards;
  -moz-animation: load 3s 3s linear forwards;
  animation: load 3s 3s linear forwards; /* adding mode as forwards makes the animation to retain its state as at the last keyframe */
  /* syntax is animation: animation-name animation-duration animation-delay animation-timing-function animation-fill-mode */
}
@-webkit-keyframes load {
  from {
    opacity: 0;
  }
  /* starts at opacity 0 */
  to {
    opacity: 1;
  }
  /* ends at opacity 1 */
}
@-moz-keyframes load {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes load {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<div id="wrapper_index">
  <div id="enter_button">
    <img src="https://www.google.com.sg/intl/en_ALL/images/srpr/logo11w.png" width="138" height="50" class="withfadeout" />
  </div>
</div>

＆＃13;

注意：上述代码中的3s延迟意味着动画本身将仅在3秒后启动，因此总共有6秒钟图像变为100％实体。如果您不需要延迟，可以将其删除。

进一步阅读： MDN - CSS3 Animation Spec

Webkit动画不会从无到有淡化

1 个答案: