如何在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中制作具有褪色效果的箭头动画

回答

相关问题