循环之间的 CSS 动画延迟

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29111499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:05:28  来源:igfitidea点击:

CSS Animation Delay in Between Loop

cssanimationdelay

提问by Yasir

Trying to get a label with class price to slide up, then slide back down with CSS.

试图让带有班级价格的标签向上滑动,然后使用 CSS 向下滑动。

I have the following --

我有以下——

-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; }
}

I am seeing that the animation starts in 4 seconds, but once it starts, just continuously loops in a fast manner. How would I add a 4 second delay in between each loop and stop for a 2 seconds at the 50% mark?

我看到动画在 4 秒内开始,但是一旦开始,就会以快速的方式连续循环。我如何在每个循环之间添加 4 秒延迟并在 50% 标记处停止 2 秒?

回答by Frambot

Make your loop longer and add more keyframes.

延长循环并添加更多关键帧。

@-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;
}