有沒有辦法使CSS動畫對角工作？

Question

我已經做了一個CSS動畫，將文本動畫給它一個閃耀的效果。該效果目前僅適用於水平。我想知道是否有一種方法可以改變動畫的方向，使其看起來像一個現實的對角線閃耀？

這裏是我當前的代碼：

h1 { 

font-family: 'BebasRegular', sans-serif; 
font-size: 150px; 
padding-bottom: 100px; 
padding-top: 50px; 
background: #E9AB17 -webkit-gradient(linear, left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat; 
-webkit-background-size: 155px; 
color: rgba(255, 255, 255, 0.1); 
-webkit-background-clip: text; 
-webkit-animation-name: shine; 
-webkit-animation-duration: 5s; 
-webkit-animation-iteration-count: infinite;  
} 

@-webkit-keyframes shine 
{ 
0% 
{ 
background-position: top left; 
} 
28%,100% 
{ 
background-position: top right; 
} 
} 

Answer 1

你可以改變自上而下的結束位置：

@-webkit-keyframes shine 
{ 
0% 
{ 
background-position: top left; 
} 
28%,100% 
{ 
background-position: bottom right; 
} 
} 

但是，最有可能的效果不會很明顯。原因是這是一個塊元素，並且很可能它延伸到遠遠超出文本末尾的右側。所以，對角線很平坦。你可以檢查這個刪除

-webkit-background-clip: text; 

property;你會看到所有的h1和背景運動。

爲了讓它更「對角」，你需要減少「更寬」;更簡單的方法可能只是指定一個寬度。

另外，如果你想做一個閃耀效果，我會選擇一個徑向漸變而不是線性漸變。如果你不知道它，檢查colorzilla，在方向選擇徑向

順便說一句，你的問題聽起來:-)再次

Answer 2

試試這個：

@keyframes shine { 
    0% { 
     transform: translatex(0px) translatey(0px) 
    } 
    100% { 
     transform: translatex(100px) translatey(100px); 
    } 
} 

jsFiddle

MDN translate documentation