CSS3 Transform Opacity Pulsate

Question

有沒有辦法通過CSS3關鍵幀轉換無限地將不透明度從0跳動到1（重複）？或者，這是否需要jQuery或JavaScript與轉換不透明度在類間隔內切換？

我正在嘗試將它應用到我的軌道轉換中（下圖）。 （我正在與多個不透明圖像漂浮在側邊欄的圖像上安裝應用程序，我建設目標C的動態壁紙的背景效果）

.orbit1 
{ 
animation: myOrbit 200s linear infinite; 
} 

.orbit2 
{ 
animation: myOrbit2 200s linear infinite; 
} 

@keyframes myOrbit1 
{ 
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) } 
    to { transform: rotate(360deg) translateX(150px) rotate(-360deg) } 
} 

@keyframes myOrbit2 
{ 
    from { transform: rotate(360deg) translateX(250px) rotate(-360deg) } 
    to { transform: rotate(0deg) translateX(250px) rotate(0deg) } 
} 

Answer 1

您可以通過添加多個動畫的做元件，例如：

.orbit1 
 
{ 
 
    /* added for example reasons */ 
 
position :absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -100px; 
 
    margin-left: -100px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    /* ---------- */ 
 
    
 
    animation: myOrbit1 20s linear infinite, Pulsate 4s linear infinite; 
 
} 
 

 
@keyframes myOrbit1 
 
{ 
 
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) } 
 
    to { transform: rotate(360deg) translateX(150px) rotate(-360deg) } 
 
} 
 

 
@keyframes Pulsate { 
 
    from { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    to { opacity: 1; } 
 
}

<div class="orbit1"></div>

I'ved改性你的一些參數（例如動畫和不透明度最低的速度）並添加了一些欺騙造型爲用於所述元件示例的目的。

編輯

我原本以爲多rotate()聲明是錯誤的，但@vals通知我why it was there（用於創建對象的反向旋轉）。我已經更新了答案，並且學到了新的東西。