css - @keyframes 改变元素的内容

Question

我正在尝试创建一个关键帧，它会在查看几秒钟后更改 div 容器的内容，但它不起作用。

这是我的代码:

@-webkit-keyframes k_home_projectSlider {
    0% {content: ".";}
    100% {content: "..";}
}
#home_projectSlider {
    height: 25em;
    width: 25em;
    border: 1px solid #000;
    margin: 10em;
    animation: k_home_projectSlider 5s;
    -webkit-animation: k_home_projectSlider 5s;
}

我的目标是改变图像，目前我不知道多久但不止 1 次。问题出在 fiddle 示例中，尽管背景大小设置为 div 宽度/高度，但图像不适合 div 容器。但是，如果我将关键帧样式直接应用于 div，它就可以正常工作。

Fiddle Demo

Answer 1

可以使用以下 CSS 属性使 background-image 适合容器 div 的大小。

background-size: cover; /* instructs that the image should be expanded to cover the size of the container */
background-repeat: no-repeat; /* instructs that the image shouldn't be repeated if it doesn't take full size of container */

#slide {
  height: 25em;
  width: 25em;
  border: 1px solid #000;
  margin: 10em;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-animation: animation 2s infinite alternate;
}
@-webkit-keyframes animation {
  from {
    background-image: url(http://reebokcrossfitbarecove.com/wp-content/uploads/2014/01/Neuro-Linguistic-Programming.jpg);
  }
  to {
    background-image: url(http://www.manifestabundancenow.com/files/shutterstock_86188195.jpg);
  }
}

<div id="slide"></div>