Question

我正在尝试在div中设置一个图像，该图像将在5秒内缓慢出现（不透明度从0到1）。我有这段代码：

.fadeDivIn {
opacity: 1;
transition: opacity 5s ease-in;
-moz-transition: opacity 5s ease-in;
-webkit-transition: opacity 5s ease-in;
-o-transition: opacity 5s ease-in;
}

但我无法弄清楚如何自动触发它。

我一直在使用CSS3关键帧转换到其他元素，理想情况下应用类似于不透明度的东西，但是已经碰到了一堵砖墙。有人可以帮忙吗？

Answer 1

http://jsfiddle.net/DerekL/9PfMF/

div{
    -webkit-animation: fadein 5s linear 1 normal forwards;
}

@-webkit-keyframes fadein{
    from { opacity: 0; }
    to { opacity: 1; }
}

Answer 2

看一下以下示例，您需要使用关键帧

div {
    background: #333;
    width: 200px;
    height: 200px;
    -webkit-animation: smooth 5s ease-in;
    -moz-animation: smooth 5s ease-in;
    -o-animation: smooth 5s ease-in;
    -ms-animation: smooth 5s ease-in;
    animation: smooth 5s ease-in;
}

@-webkit-keyframes smooth {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

示例：http://jsfiddle.net/zxx8u/1/

Answer 3

您可以使用jQuery动画，非常干净且易于操作。

JSFiddle link

<div style="opacity:0;">some text</div>
$("div").animate({opacity: '1'}, 5000);

Answer 4

您可以使用简单的css3关键帧动画

demo

<div class="timedelay"></div>

.timedelay {
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: red;
  -webkit-animation: myanim 5s ease 5s;
}

@-webkit-keyframes myanim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Answer 5

这样的事情对我有用：

.chat-messages li{
  -webkit-animation: fadein 5s linear 1 normal forwards;
}

@-webkit-keyframes fadein{
  0% { opacity: 1;}
  90% { opacity: 1;}
  100% { opacity: 0;}
}

div上的CSS不透明度更改时间延迟而不是用户交互

5 个答案: