Question

我有一个图像显示，然后在横幅的开头淡出。

HTML -

<div id="logo-fade"><img src="http://www.ison-  distribution.com/uploads/arty/halo-logo.png"/></div>

/* logo animation */

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

@-moz-keyframes fadeout {
    100% { opacity: 0; }
    0%   { opacity: 1; }
}

@keyframes fadeout {
    100% { opacity: 0; }
    0%   { opacity: 1; }
}

#logo-fade {
    width:970px;
    height:250px;
    -webkit-animation: fadeout 5s ease-out forwards ;
       -moz-animation: fadeout 5s ease-out forwards ;
            animation: fadeout 5s ease-out forwards ;
}

我希望图片在视频结束前7s内淡出（在后台播放）并保留。

一切都已到位，但最终图片的不透明度在整个时间轴上都是100％，直到最后淡出。

example

/* banner animation */

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

@-moz-keyframes fadein {
100% { opacity: 1; }
    50%  { opacity: 0; }
    25%  { opacity: 0; }
    0%   { opacity: 1; }
}

@keyframes fadein {
    100% { opacity: 0; }
    50%  { opacity: 0; }
    25%  { opacity: 0; }
    0%   { opacity: 1; }
}

#banner-fade {
    width:970px;
    height:250px;
    -webkit-animation: fadein 4s ease-in 12s forwards ;
       -moz-animation: fadein 4s ease-in 12s forwards ;
            animation: fadein 4s ease-in 12s forwards ;
}

Answer 1

在jQuery中使用fadeIn（）函数要容易得多吗？ http://api.jquery.com/fadein/

Answer 2

我为你做了一个Jsfiddle，请看这里https://jsfiddle.net/sgvcqc4r/

就是这样：

$('#logo-fade').hide().delay(9000).fadeIn(2000);
$('#banner-fade').hide().delay(7000).fadeIn(2000);

动画不透明度在延迟时淡入 - 将图像的不透明度设置为0直到X秒？

2 个答案: