Is there a way to make CSS animation work diagonally?

Question

I have made a CSS animation that will animate the text give a shine effect to it. The effect currently only works with horizontal. I was wondering is there a way that I could change the direction of the animation to make it look like a realistic diagonal shine?

Here is my current code:

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

Try this:

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

jsFiddle

MDN translate documentation