有没有办法使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