How to make arrow animation with fading effects in css3

my css3 is not working. Maybe there’s something that I’ve forgot.

I thought this is a jquery but when I disable javascript, it is still working so I guess this was css3.

I made a JsFiddle. The arrow is moving to right with a fading style.
I’ve inserted it in :before button.

Here’s my css

.next-button button:before {
 -webkit-animation: next 1.2s infinite normal ease-out;
 animation: next 1.2s infinite normal ease-out;
 position: absolute;
 content: "";
 top: 47px;
 bottom: 0;
 right: 6%;
 margin: auto;
 width: 0;
 height: 0;
 border: 8px solid transparent;
 border-left-color: #fff;

Please help

Add animation for next like this:

Can also check the fiddle

I think what you’ve forgot is a @keyframes.

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}

When you use a keyframes, as w3schools said it, you have to put the name next to the declaration, and to write the behavior at each time, represented in percentage, of the animation. Here we can see the arrow changing of colour, but you can modify the behavior in the keyframes.

Bye 🙂