如何在css3中製作具有褪色效果的箭頭動畫

我的css3不起作用。也許有些事我忘了。如何在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; 
}

請幫

來源

2017-08-29 Kobe Bryan

您的實際問題是......？也許你想先看看絕對定位元素的參考點是什麼？ – CBroe

名爲「next」的動畫未在任何位置定義。有關如何設置動畫關鍵幀的信息，請參閱https://www.w3schools.com/css/css3_animations.asp。 – jfeferman

你的問題和你的JSFiddle都不是一個描述你的問題的完整[mcve]。你可以編輯你的文章，包括一個？ – TylerH

添加動畫明年是這樣的：

.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

來源

2017-08-29 17:51:40 kravisingh

我想你已經忘了是@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/在這裏我們可以看到顏色的箭頭變化，但是您可以修改關鍵幀中的行爲。

再見:)

來源

2017-08-29 17:49:42

如何在css3中製作具有褪色效果的箭頭動畫

回答

相關問題