CSS动画

Question

我有两张图片：

图片1：/assets/promo_xmas.png

图片2：/assets/howtoplay.gif

我希望制作一个节目10秒然后隐藏，之后隐藏我希望第二个图像显示10秒然后隐藏，之后第一个图像显示10秒然后隐藏我希望它反复做永远。

图片1的html是：

<div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
    <img width="320" height="267" src="assets/howtoplay.gif">
</div>

图片2的html是：

<div id="promo" class="gif" style="margin-top: 33px; display: none;">
    <img width="320" height="267" src="assets/promo_xmas.png">
</div>

另外，如果你能告诉我如何使用fadeout和fadein来做到这一点。感谢。

（随意编辑此内容以使其更易理解）

Answer 1

CSS动画

将两个图像包裹在具有以下内容的块元素中：position:relative
将两张图片都设为position:absolute
制作2 @keyframes和animation: 10s infinite alternate
为每张图片分配@keyframe animation。
动画的两个属性是opacity和z-index（z-index仅在2帧上，因为只有2个状态真正低于或高于另一个定位元素。）< / p>

演示

#promo {
  margin-top: 33px;
  position: relative;
}

img {
  width: 320px;
  height: 267px;
  position: absolute;
}

.A {
animation: animA 10s infinite alternate;
}

.B {
animation: animB 10s infinite alternate;
}

@keyframes animA {
  0%, 25% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    opacity: .5;
  }
  
  100% {
    opacity: 1;
    z-index: 1
  }
}

@keyframes animB {
  0%,25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: .5;
  }
 100% {
    opacity: 0;
    z-index: 0
  }
}

<figure id="promo">
  <img src="https://pockey.io/assets/promo_xmas.png" class='B'>




  <img src="https://pockey.io/assets/howtoplay.gif" class='A'>
</figure>

Answer 2

关于旋转木马的谷歌搜索的第一个回复：http://kenwheeler.github.io/slick/

示例：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    // Add the new slick-theme.css if you want the default styling
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>

<div class="your-class">
  <div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
    <img width="320" height="267" src="assets/howtoplay.gif">
  </div>
  <div id="promo" class="gif" style="margin-top: 33px; display: none;">
    <img width="320" height="267" src="assets/promo_xmas.png">
  </div>
</div>


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.your-class').slick();
    });
</script>
</body>
</html>

建议在外部JavaScript文件中敲击最后一个脚本标记。

Answer 3

这是一个基本的例子：

＆＃13;

function showOne() {
  var img = $("img").eq(0);
  img.fadeIn('slow').delay('10000').fadeOut('slow', showTwo);
}

function showTwo() {
  var img = $("img").eq(1);
  img.fadeIn('slow').delay('10000').fadeOut('slow', showOne);
}

$(function() {
  $('img').hide();
  showOne();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
  <img width="320" height="267" src="http://via.placeholder.com/350x150?text=1">
</div>

<div id="promo" class="gif" style="margin-top: 33px;">
  <img width="320" height="267" src="http://via.placeholder.com/350x150?text=2">
</div>

＆＃13;

如何重复淡入/淡出两张图像？

3 个答案:

CSS动画

演示