css3でフェード効果を使って矢印アニメーションを作成するには

Question

私のcss3は機能しません。多分私が忘れてしまったことがあります。

私は、これはjqueryのであると思ったが、私はJavaScriptを無効にすると、それはまだそう働いている私は、これはCSS3だったと思います。

JsFiddleを作成しました。矢印はフェーディングスタイルで右に移動しています。 私はそれを：beforeボタンに挿入しました。

は、ここに私の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; 
} 

だ、私は何を忘れてきたことは@keyframesだと思う

Answer 1

は、このような次のためのアニメーションを追加します。

.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>

もfiddle

Answer 2

を助けてください。

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

あなたはW3Schoolsのは、それを言ったように、あなたはアニメーションの、宣言に次の名前を入れて、百分率で表される各時点での振る舞いを、記述する必要があり、キーフレームを使用し

@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://jsfiddle.net/Lqkuhx6g/1/矢印の色の変化を確認できますが、キーフレームの動作を変更できます。

さようなら:)