CSS同时在多行上加载动画 [英] CSS loads animations on multiple lines at the same time

问题描述

我有一些CSS代码可以创建打字动画(请参见代码段).两条线同时加载.如何使它们一个接一个地加载?

I have some CSS code that creates a typing animation (see snippet). The two lines load simultaneously. How do I make them load one after another?

body{
	background: #000;
	color: lime;
}
div.a{
	font-size: 14px;
	margin: 30px;
	white-space:nowrap;
	overflow: hidden;
	width: 30em;
	animation: type 5s steps(50, end) 1;	
}
@keyframes type{
	from{ width: 0;}
}
@keyframes blink{
	to{ opacity: .0;}
}

<div class="a">Supercalifragilisticexpialidocious<br /> Another sentence...</div>

推荐答案

基本上，您可以通过检查 CSS3动画是否已结束(如本链接中所述)来完成

Basically you can do that by checking whether the CSS3 Animation has ended or not like explained in this link

http://blog.teamtreehouse.com/using-jquery-to-detect-何时css3-animations-and-transitions-end

然后创建一个函数，以应用 animation类，并在 jQuery ready 上调用它，动画结束时，在函数内部，检查是否还有另一行句子想要动画

then create a function to apply the animation class and call it on jQuery ready, inside the function when the animation ended, check whether there's still another line of sentences that want to be animated

这是更新后的代码，应该可以像您想要的那样工作

Here's the updated code that should work like what you wanted it to be

nb:仅当句子只有一行，并且更多时，您必须将其分隔为另一个元素(如示例中所示)，这才起作用，最后的警告也只是显示该函数动画化打字将不再开始

nb2:我忘记了这个问题不包含 JavaScript 或 jQuery 标记，但是我希望这可以帮助其他偶然的人使用 jQuery

nb2: I forgot that the question doesn't include the JavaScript or jQuery tag, but I hope this could help if by chance someone else needed to use the jQuery

var $typeAnimation;
$(function(){
  $typeAnimation = $(".view").first();
  if($typeAnimation.size() > 0) {
    startAnimation();
  }
});

function startAnimation() {
  $typeAnimation.addClass("animate");
  $typeAnimation.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
  function(e) {
    $typeAnimation = $typeAnimation.next(".view");
    if($typeAnimation.size() > 0) {
      startAnimation();
    } else {
      alert("No More Sentence to be animated");
    }
  });
}

body{
	background: #000;
	color: lime;
}
.view {
    display: none;
}
.view.animate{
    display: block;
	font-size: 14px;
	margin: 30px;
	white-space:nowrap;
	overflow: hidden;
	width: 30em;
	animation: type 5s steps(50, end) 1;	
}
@keyframes type{
	from{ width: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="view">Supercalifragilisticexpialidocious</div>
<div class="view">Another sentence...</div>
<div class="view">Yet Another sentences...</div>
<div class="view">And Also Another Final sentence...</div>

这篇关于CSS同时在多行上加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！