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;}
}

https://www.w3schools.com/css/css3_animations.asp

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.

https://jsfiddle.net/Lqkuhx6g/1/ Here we can see the arrow changing of colour, but you can modify the behavior in the keyframes.

Bye 🙂