下面的动画在三个不同的元素上运行。
我怎么能随机化动画，使它们发生在不同的时间？
@keyframes shine{
10% {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
}
}
另外，动画之间似乎存在延迟，如何在不增加过渡本身速度的情况下加快动画之间的持续时间？
我已经尝试添加更多的关键帧，但它似乎并没有增加动画之间的时间。
1
您可以为每个按钮使用不同的动画延迟和动画持续时间值，如下所示：
/**
* Icon
*/
.icon {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
display: inline-block;
margin: 25px 0 25px 25px;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 12px;
font-family: sans-serif;
}
.icon:nth-child(1) { background: cornflowerblue; }
.icon:nth-child(2) { background: salmon; }
.icon:nth-child(3) { background: gray; }
/**
* The "shine" element
*/
.icon:after {
animation: shine 1s ease-in-out alternate infinite;
animation-fill-mode: forwards;
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.icon:nth-child(1):after { animation-delay: .1s; }
.icon:nth-child(2):after { animation-delay: .3s; }
.icon:nth-child(3):after { animation-delay: .5s; }
/* Hover state - trigger effect */
/* Active state */
@keyframes shine{
60% {
top: -30%;
left: -30%;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
}
}<a href="#" class="icon">let</a>
<a href="#" class="icon">it</a>
<a href="#" class="icon">shine</a>
<!--
Forked by:
Nicolas Gallagher - ://jsfiddle.net/KbNq7/
Chris Coyier - ://jsfiddle.net/chriscoyier/hk6z9/1/
-->本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（65条）