Question

我想知道我是否可以实现简单的延迟 - ＆gt;仅使用CSS 的fadeins（jQuery链接动画）并允许无限循环。

$('.learnwhat').delay(1000).fadeIn(1000);
$('.learnwhat').delay(1500).fadeOut(1000);
$('.seeresults').delay(3000).fadeIn(1000);
$('.seeresults').delay(1000).fadeOut(1000);
$('.personalsolution').delay(6000).fadeIn(1000);
$('.personalsolution').delay(1000).fadeOut(1000);

Answer 1

您可以随时使用css动画，并通过除以100％/总秒数来计算关键帧的百分比。

所以例如

.learnwhat{
  padding:5px;
  background:khaki;
  border:1px solid #ccc;
  animation: learnAnimation 4.5s infinite;
}
@keyframes learnAnimation{
   0%{opacity:0}
   22.2%{opacity:0}
   44.4%{opacity:1} 
   77.7%{opacity:1}
   100%{opacity:0}
}

将成为（ 1s延迟+ 1s fadeIn + 1.5s延迟+ 1s fadeOut = 4.5s，100％/ 4.5 =每秒22.2％或每半秒11.1，因为我们也想要）

＆＃13;

<div class="learnwhat">learnwhat</div>

＆＃13;

android:taskAffinity="hello.world"

＆＃13;

我只包含标准关键帧语法（没有供应商细节）

您可以对其他两个使用相同的逻辑。

jQuery链接，fadeIn和fadeOut只用CSS

1 个答案: