如何在css3中制作具有淡化效果的箭头动画

Question

我的css3无效。也许有些东西我已经忘记了。

我认为这是一个jquery，但是当我禁用javascript时，它仍在工作，所以我猜这是css3。

我做了JsFiddle。箭头向右移动，褪色。 我把它插入：按钮之前。

这是我的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;
 }

请帮忙

Answer 1

为下一个添加动画：

＆＃13;

＆＃13;

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

＆＃13;

<div class="next-button">
  <button type="button">
    Next
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;

还可以查看fiddle

Answer 2

我认为你忘了的是@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

当您使用关键帧时，正如w3schools所说，您必须在声明旁边放置名称，并在每次写入动画时以百分比表示的行为。

https://jsfiddle.net/Lqkuhx6g/1/这里我们可以看到箭头颜色的变化，但你可以修改关键帧中的行为。

再见：）