html - CSS Animation不会第二次申请

Question

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

This is my test page下面是我的代码。

HTML代码:

<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

CSS 动画的迭代计数 ( animation-iteration-count ) 在没有为该属性指定值时仅为 1。在这里，因为您没有指定任何值，所以动画只执行一次(即在页面加载时)。没有纯 CSS 方法可以在动画完成循环后重新触发动画。它必须从元素中移除，然后重新连接才能重新开始。

因此，对于您的情况，您必须执行以下操作 - (a) 在 #caption 上设置动画在页面加载时使用 JS，因为它可以更轻松地删除和重新添加它们 (b) 在完成 slideout 后动画，从元素中删除动画(即设置 animation-name: none )并设置 html的 #caption没有因为:empty选择器只会隐藏它。 (c) 在元素上设置下一个图像(使用 loadRandomImage 函数)后，立即将动画设置回元素。这将重新触发动画，因此在每次图像切换期间，标题将滑入和滑出。

注意:我更改了 HTML 和 JS 中与此答案无关的一些部分(例如删除两个 div 并将它们替换为 1，避免 $.backstretch 和loading image using 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img"></div>
<div id="caption"></div>

The animationend event still requires vendor prefixes in some browsers.