试图获得一个带有价格的标签来向上滑动,然后使用CSS向下滑动.
我有以下 –
-webkit-animation-name: slidingPrice;
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 4s;
@-webkit-keyframes slidingPrice {
0% { opacity: 0; bottom: -30px; }
50% { opacity: 1; bottom: 0; }
100% { opacity: 0; bottom: -30px; }
}
我看到动画在4秒内开始,但一旦开始,只需要以快速的方式连续循环.如何在每个循环之间增加4秒的延迟并在50％的标记处停止2秒？
解决方法
使您的循环更长,并添加更多的关键帧.
@-webkit-keyframes slidingPrice {
0% { opacity: 0; bottom: -30px; } /* 0ms initial values */
2.38% { opacity: 1; bottom: 0; } /* 150ms half of animation */
34.13% { opacity: 1; bottom: 0; } /* 2150ms still at half of animation */
36.51% { opacity: 0; bottom: -30px; } /* 2300ms back to initial */
100% { opacity: 0; bottom: -30px; } /* 6300ms still at initial */
}
.price {
-webkit-animation-name: slidingPrice;
-webkit-animation-duration: 6300ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 4s;
}
