1

我正在尝试淡入淡出多个标题以创建三种语言的欢迎信息。我重叠了标题，首先应该出现英语欢迎消息，然后淡出并出现意大利语欢迎消息，然后这个淡出并出现西班牙语消息......并且动画重复。有点像不同语言的 Apple iOS 欢迎信息。我无法理解如何管理动画的时间以使这种情况发生并且消息不会同时发生冲突。

这是我的代码：

https://jsfiddle.net/1p7z4v0e/

<h1 class="text-animated-one">Welcome</h1>
<h1 class="text-animated-two">Benvenuti</h1>
<h1 class="text-animated-three">Bienvenidos</h1>

/* Welcome Message FadeIn Effect */
/* Keyframes */
/* Chrome */
@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
/* Firefox */
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
.text-animated-one, .text-animated-two, .text-animated-three {
    position: absolute;
}
.text-animated-one
{
    opacity:0; 
    -webkit-animation:fadeIn ease-in 1s infinite;
    -moz-animation:fadeIn ease-in 1s infinite;
    animation:fadeIn ease-in 1s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;

    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.text-animated-two
{
    opacity:0; 
    -webkit-animation:fadeIn ease-in 20s infinite;
    -moz-animation:fadeIn ease-in 20s infinite;
    animation:fadeIn ease-in 20s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;

    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    animation-delay: 20s;
}

.text-animated-three
{
    opacity:0; 
    -webkit-animation:fadeIn ease-in 20s infinite;
    -moz-animation:fadeIn ease-in 20s infinite;
    animation:fadeIn ease-in 20s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    animation-duration:10s;

    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    animation-delay: 40s;
}
4

1 回答 1

1

由于您在三个选项之间循环，您可以将动画设置为显示三分之一的时间。然后您可以将所有三个动画的持续时间设置为相同，并将第二个和第三个动画分别偏移三分之一和三分之二。这是有关如何执行此操作的示例。

/* Welcome Message FadeIn Effect */
/* Keyframes */
/* Chrome */
@-webkit-keyframes fadeIn { 
  0% { opacity:0; opacity: 1\9; /* IE9 only */ } 
  33% { opacity:1; }
  66% { opacity: 0 }
}

/* Firefox */
@-moz-keyframes fadeIn { 
  0% { opacity:0; opacity: 1\9; /* IE9 only */ } 
  33% { opacity:1; }
  66% { opacity: 0 }
}

.text-animated-one, .text-animated-two, .text-animated-three {
    position: absolute;
}

.text-animated-one
{
    opacity:0; 
    -webkit-animation:fadeIn ease-in 9s infinite;
    -moz-animation:fadeIn ease-in 9s infinite;
    animation:fadeIn ease-in 9s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.text-animated-two
{
    opacity:0; 
    -webkit-animation:fadeIn ease-in 9s infinite;
    -moz-animation:fadeIn ease-in 9s infinite;
    animation:fadeIn ease-in 9s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   animation-delay: 3s;
}

.text-animated-three
{
    opacity:0; 
    -webkit-animation:fadeIn ease-in 9s infinite;
    -moz-animation:fadeIn ease-in 9s infinite;
    animation:fadeIn ease-in 9s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   animation-delay: 6s;
}
于 2017-06-01T11:16:10.440 回答