CODEWITHSUNDEEP
csscss-transitions
Kobe Bryan
Kobe Bryan

Reputation: 317

How to make arrow animation with fading effects in css3

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

enter image description here

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

Upvotes: 1

Views: 1777

Answers (2)

kravisingh
kravisingh

Reputation: 1660

Add animation for next like this:

.next-button button {
    float: right;
    width: 38%;
    box-sizing: border-box;
    margin-top: 0;
    padding: 8px 0;
    display: block;
    font-size: 1.8rem;
    height: 45px;
    line-height: 1;
    position: relative;
}

.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: 4px;
    bottom: 0;
    right: 6%;
    margin: auto;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: #fff;
}
@keyframes next{
  0%{
    right: 6%;
  }
  100%{
    right: 1%;
  }
}
<div class="next-button">
  <button type="button">
    Next
  </button>
</div>

Can also check the fiddle

Upvotes: 2

Benjamin Audet
Benjamin Audet

Reputation: 493

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 :)

Upvotes: 1

Related Questions