Зациклить анимацию в CSS (SCSS)

моих познаний хватило только чтоб сделать (найти и переделать под себя) стиль кнопки, но вот как довести до ума не представляю. Сейчас анимация срабатывает при наведение на кнопку, а нужно чтоб она была зацикленной, точнее повторялась через определений интервал. Такое возможно?
@-webkit-keyframes sheen { 0% { -webkit-transform: skewY(-15deg) translateX(0); transform: skewY(-15deg) translateX(0); } 100% { -webkit-transform: skewY(-15deg) translateX(12.5em); transform: skewY(-15deg) translateX(12.5em); } } @keyframes sheen { 0% { -webkit-transform: skewY(-15deg) translateX(0); transform: skewY(-15deg) translateX(0); } 100% { -webkit-transform: skewY(-15deg) translateX(12.5em); transform: skewY(-15deg) translateX(12.5em); } } .wrapper { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .button { padding: 0.75em 2em; text-align: center; text-decoration: none; color: #2194e0; border: 2px solid #2194e0; font-size: 24px; display: inline-block; border-radius: 0.3em; transition: all 0.2s ease-in-out; position: relative; overflow: hidden; } .button:before { content: ""; background-color: rgba(255, 255, 255, 0.5); height: 100%; width: 1em; display: block; position: absolute; top: 0; left: -4.5em; -webkit-transform: skewX(-15deg) translateX(0); transform: skewX(-15deg) translateX(0); transition: none; } .button:hover { background-color: #2194e0; color: #fff; border-bottom: 4px solid #1977b5; } .button:hover:before { -webkit-transform: skewX(-15deg) translateX(13.5em); transform: skewX(-15deg) translateX(13.5em); transition: all 1s ease-in-out; }

Shiney!

Нашел решение задачи. Вот такое решение, может кому-то пригодится:
body {background: #ffbfbe;} a { text-decoration: none; outline: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; background: #fe6637; color: #fff; border-radius: 8px; font-family: 'Montserrat', sans-serif; transition: .2s ease-in-out; } a:before { content: ""; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.5)); height: 50px; width: 50px; position: absolute; top: -8px; transform: skewX(-45deg); animation: shine 1s linear infinite; } @keyframes shine { from {left: -75px;} to {left: 150px;} } Button

Ответ

Такого результата Вы хотели добиться?
@-webkit-keyframes sheen { to { -webkit-transform: skewY(-15deg) translateX(13.5em); transform: skewY(-15deg) translateX(13.5em); } } @keyframes sheen { to { -webkit-transform: skewY(-15deg) translateX(13.5em); transform: skewY(-15deg) translateX(13.5em); } } .wrapper { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .button { padding: 0.75em 2em; text-align: center; text-decoration: none; color: #2194e0; border: 2px solid #2194e0; font-size: 24px; display: inline-block; border-radius: 0.3em; transition: all 0.2s ease-in-out; position: relative; overflow: hidden; } .button:before { content: ""; background-color: rgba(255, 255, 255, 0.5); height: 500%; width: 1em; display: block; position: absolute; top: -1.5em; left: -4.5em; -webkit-transform: skewX(-25deg) translateX(0); transform: skewX(-25deg) translateX(0); transition: none; } .button:hover { background-color: #2194e0; color: #fff; border-bottom: 4px solid #1977b5; } .button:hover:before { animation: sheen 1s infinite ease-in-out; }

Shiney!