更改：動畫內容之前

我正在嘗試更改CSS僞元素：之前元素內容與動畫類似於jsfiddle here。更改：動畫內容之前

#thing:before 
{ 
    content:"TEST00"; 
    background-color:rgba(200,200,200,0.8); 
    animation:sideText 30s ease-in-out infinite; 
} 

@keyframes sideText 
{ 
    0% {content:"TEST1A";background-color:rgba(180,90,200,0.8)} 
    30%{content:"TEST1B"} 
    32%{content:"TEST2A";background-color:rgba(80,190,200,0.8)} 
    60%{content:"TEST2B"} 
    62%{content:"TEST3A";background-color:rgba(80,90,20,0.8)} 
    98%{content:"TEST3B"} 
    100%{content:"TEST1C"} 
}

在Chrome中工作很好，只有Firefox中的背景更改& Safari。

這是我應該接受的不在這兩個瀏覽器中工作的東西，還是有另一種方法來做到這一點？

我試過不同的供應商前綴，但沒有成功。

來源

2016-01-14 boomshanka

據我所知，它只能在chrome中工作。 –

content屬性不符合CSS規範（CSS Spec）（MDN Reference）的動畫，但無論什麼原因，Chrome都允許這樣做。

CSS-Tricks Article克里斯Coyier

在我自己的測試動畫的內容只（在寫作時V46）在穩定的桌面版Chrome工作。沒有其他地方支持。桌面或iOS上沒有Safari。沒有Firefox。沒有IE。這些瀏覽器中的每一個都將忽略動畫，只顯示僞元素中的原始內容。

在遙遠的未來它可能是一個方便的技巧，或者它可能永遠不會被任何東西支持。非標準功能始終存在被棄用的風險，因此Chrome支持可能不會永遠持續。

來源

2016-01-14 07:27:55

可以使用具有幾行內容，和裁剪它

來實現一種解決方法（我使用的現在已過時剪輯屬性，但它可以很容易地適應夾路徑）

#thing { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color: rgba(80, 90, 200, 0.8) 
 
} 
 
#thing:before { 
 
    content: "TEST1A\aTEST1B\aTEST2A"; 
 
    background-color: rgba(200, 200, 200, 0.8); 
 
    animation: sideText 5s infinite; 
 
    position: absolute; 
 
    white-space: pre; 
 
    line-height: 20px; 
 
} 
 
@keyframes sideText { 
 
    0%, 33% { 
 
    clip: rect(0px 120px 20px 0px); 
 
    top: 0px; 
 
    } 
 
    33.01%, 
 
    66% { 
 
    clip: rect(20px 120px 40px 0px); 
 
    top: -20px; 
 
    } 
 
    66.01%, 
 
    100% { 
 
    clip: rect(40px 120px 60px 0px); 
 
    top: -40px; 
 
    } 
 
}

<div id="thing"> 
 

 
</div>

來源

2016-01-14 08:55:50 vals

更改：動畫內容之前

回答

相關問題