@keyframes更改元素的內容

我想創建一個關鍵幀在視圖秒後更改div容器的內容，但它不起作用。@keyframes更改元素的內容

這裏是我的代碼：

@-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次。問題在於小提琴的例子，雖然background-size被設置爲div寬度/高度，但圖像不適合div容器。但是，如果我直接將關鍵幀樣式應用於div，它工作正常。

Fiddle Demo

來源

2015-01-02 Nimmi

據我所知，動畫'content'是不可能的。另外'content'只適用於':: before'＆':: after'後面的常規元素。 – Natsu

@Natsu嗯，好的謝謝。所以有沒有其他方式然後javascript：/ – Nimmi

然而，你可以改變圖像（如果你有1點，然後兩個，然後三等），它可以工作... – jbutler483

的background-image可以由通過使用下面的CSS屬性，以適應容器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>

來源

2015-01-03 08:30:13 Harry

#solved :)謝謝 – Nimmi

@keyframes更改元素的內容

回答

相關問題