Question

我目前遇到CSS动画问题。从数组调用随机背景，显示和更改等等。我为图片标题id应用了两个动画，幻灯片放入和延迟滑出。幻灯片的输入和输出第一次运行良好，但是当第二个背景显示时，屏幕只显示在屏幕上而没有任何动画。

HTML code：

<script type="text/javascript">

function loadRandomImage(imgs) {
    var index = Math.floor(Math.random() * imgs.length);

    console.log("loadRandomImages(): index = "+ index);

    $.backstretch(imgs[index].url, {duration: 30000, fade: 1200});  
    $("#caption").html(imgs[index].caption);
}

var images = new Array(); //array of imgs objects

images[0] = {url: "https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg", caption: "Caption0"};
images[1] = {url: "https://s-media-cache-ak0.pinimg.com/736x/e6/41/74/e64174e355f78a0f07e951bcec62ca96.jpg", caption: "Caption1"};
images[2] = {url: "https://media.giphy.com/media/3o7abHrsGbV10rCeze/giphy.gif", caption:"Caption2"};
images[3] = {url: "https://media.giphy.com/media/Bbt5FxRiArl3a/giphy.gif", caption:"Caption3"};

// Preload

setTimeout(loadRandomImage, 1000, images);

// Change images every 3 seconds

setInterval(loadRandomImage, 30000, images);

</script>


<div id="pattern"></div>
<div id="pattern2"></div>

<div id="caption"></div>

CSS代码：

#caption {
    position: relative;
    font: 1.5em Trebuchet, sans-serif;
    text-align: center;
    margin-left: 75%;
    z-index: 56;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px;
    animation: slidein 3s, slideout 3s 27s;
}

#caption:empty
{
    display: none;
}

@keyframes slidein {
  0% {
    margin-left: 100%;
    width:100%;
    visibility:hidden;
    opacity: 0; 
  }

  100% {
    margin-left: 75%;
    width:100%;
    opacity: 1;
    visibility:visible;
  }
}

@keyframes slideout {
  0% {
    margin-left: 75%;
    width:100%;
    opacity: 1;
    visibility:visible;
  }

  100% {
    margin-left: 100%;
    width:100%;
    opacity:0;
    visibility:hidden;
  }
}

Answer 1

您需要使用回调，具体说明如下：

<强> How do create perpetual animation without freezing?

Answer 2

我认为动画方向需要改变。

这些是可能性：

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

我认为您需要做以下其中一项：

<强>替代动画将在每个奇数时间（1,3,5等）正常播放，并在每个偶数时间以相反方向播放（2,4,6等等）

<强>交替反向动画将在每个奇数时间（1,3,5等）反向播放，并在每个偶数时间以正常方向播放（2,4,6等等）

目前设为

animation-direction: initial, initial;

见到这里：http://www.w3schools.com/cssref/css3_pr_animation-direction.asp

Answer 3

当没有为该属性赋值时，CSS动画的迭代次数（animation-iteration-count）仅为1。这里由于您没有指定任何值，因此动画只执行一次（即在页面加载时）。一旦动画完成其循环，就没有纯粹的CSS方式来重新触发动画。它必须从元素中删除，然后重新附加，以便重新开始。

所以，对于你的情况，你需要做的是 - （a）在页面加载时使用JS在#caption上设置动画，因为它可以更容易地删除和重新添加它们（b）完成后在slideout动画中，从元素中删除动画（即设置animation-name: none）并将html的{{1}}设置为无，因为#caption选择器只会隐藏它。（c）只要在元素上设置下一个图像（使用:empty功能），就可以在元素上设置动画。这将重新触发动画，因此在每次图像切换期间，标题将滑入和滑出。

注意：我已经更改了HTML和JS中与此答案无关的部分内容（例如删除了两个loadRandomImage并将其替换为1，避免使用{{ 1}}并使用div等加载图像。但这些只是辅助项目，不会影响这个答案的关键（即删除和添加动画）。

$.backstretch

css()

function loadRandomImage(imgs) {
  var index = Math.floor(Math.random() * imgs.length);

  $('#img').css('background-image', 'url(' + images[index].url + ')');
  $('#caption').css({
    'animation-name': 'slidein, slideout',
    'animation-duration': '3s, 3s',
    'animation-delay': '0s, 7s'
  });
  $("#caption").html(imgs[index].caption);
}

var images = new Array(); //array of imgs objects

images[0] = {
  url: "http://lorempixel.com/100/100/nature/1",
  caption: "Caption0"
};
images[1] = {
  url: "http://lorempixel.com/100/100/nature/2",
  caption: "Caption1"
};
images[2] = {
  url: "http://lorempixel.com/100/100/nature/3",
  caption: "Caption2"
};
images[3] = {
  url: "http://lorempixel.com/100/100/nature/4",
  caption: "Caption3"
};

// Preload

setTimeout(loadRandomImage, 1000, images);


$('#caption').on('animationend', function(e) {
  if (e.originalEvent.animationName == 'slideout') {
    $('#caption').css('animation-name', 'none');
    $('#caption').html('');
    setTimeout(function() { /* dummy timeout to make sure browser sees animation as none before adding it again */
      loadRandomImage(images);
    }, 0);
  }
});

#caption { position: relative; font: 1.5em Trebuchet, sans-serif; text-align: center; margin-left: 75%; z-index: 56; color: #ffffff; background: rgba(0, 0, 0, 0.7); padding: 8px; } #caption:empty { display: none; } @keyframes slidein { 0% { margin-left: 100%; width: 100%; visibility: hidden; opacity: 0; } 100% { margin-left: 75%; width: 100%; opacity: 1; visibility: visible; } } @keyframes slideout { 0% { margin-left: 75%; width: 100%; opacity: 1; visibility: visible; } 100% { margin-left: 100%; width: 100%; opacity: 0; visibility: hidden; } } /* Just for demo */ #img { height: 100px; width: 100px; }事件在某些浏览器中仍然需要供应商前缀。

Answer 4

您可以直接使用CSS解决方案，而不是已经提供的Javascript建议。

只需将animation-iteration-count设置为“无限”（以连续交替2个元素，或将整数设置为一定数量的重复）

如果你想要交错/交替动画：

在第二个元素上使用animation-delay（与animation-duration匹配），以便在第一个元素动画完成后才会显示
在动画结束时建立延迟（恢复到原始状态@ 50％），以便第一个元素保持隐藏，而第二个元素保持隐藏状态。

CSS动画第二次不适用

4 个答案: