淡入和脉冲文本，暂停，然后在循环中使用 CSS3 关键帧淡出？答案

【问题标题】：Fade in and pulse text, pause, then fade out with CSS3 Keyframes on loop?淡入和脉冲文本，暂停，然后在循环中使用 CSS3 关键帧淡出？
【发布时间】：2014-05-02 07:28:33
【问题描述】：

我很难弄清楚如何使用 css 关键帧实现以下目标。

我目前有一个幻灯片，其中包含 4 张幻灯片，这些幻灯片同时带有关键帧并设置为无限循环。

当每张幻灯片出现在“框架”中时，我希望一些文本淡入并脉冲一次延迟然后淡出。喜欢这个演示，除了我不想使用 jQuery。 Demo

如果有人能提供帮助，我将不胜感激。

我遇到了这个example，这是我想要实现的目标，但我需要 4 个

并让它脉动。我无法理解如何编辑关键帧。

我的幻灯片的 CSS 是这样的

@-webkit-keyframes slider {
  0%, 20%, 100%{ left: 0 }
  25%, 45%{ left: -100% }
  50%, 70%{ left: -200% }
  75%, 95%{ left: -300% }
}
@-moz-keyframes slider {
  0%, 20%, 100%{ left: 0 }
  25%, 45%{ left: -100% }
  50%, 70%{ left: -200% }
  75%, 95%{ left: -300% }
}
@keyframes slider {
  0%, 20%, 100%{ left: 0 }
  25%, 45%{ left: -100% }
  50%, 70%{ left: -200% }
  75%, 95%{ left: -300% }
}

#carousel .video-list, #descriptionCarousel .description-list {
  position: relative;
  width: 400%;
  height: 100%;
  left: 0; 
  top: 0;
  bottom: 0;
  animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
  -webkit-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
  -moz-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
  -o-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
  -ms-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}

【问题讨论】：

标签： html css animation infinite pulse

【解决方案1】：

<div id="animation">
    <ul>
        <li class="one">This is</li>
        <li class="two">CSS3 looped</li>
        <li class="tree">animation</li>
        <li class="four">animation</li>
    </ul>
</div>

css

#animation{
    width: 200px;
    height: 60px;
}
.one, .two, .tree, .four{
    position: absolute;
    width: 200px;
    height: 60px;
}
.one{
    background-color: red;
    opacity: 0;
    -webkit-animation: one 12s ease-in alternate infinite;
}
.two{
    background-color: green;
    opacity: 0;
    -webkit-animation: two 12s ease-in alternate infinite;
}
.tree{
    background-color: gray;
    opacity: 0;
    -webkit-animation: tree 12s ease-in alternate infinite;
}
.four{
    background-color: purple;
    opacity: 0;
    -webkit-animation: four 12s ease-in alternate infinite;
}
@-webkit-keyframes one {
    0% { opacity: 1; }
    33% { opacity: 0; }
    66% { opacity: 0; }
    99% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes two {
    0% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 0; }
    99% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes tree {
    0% { opacity: 0; }
    33% { opacity: 0; }
    66% { opacity: 1; }
    99% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes four {
    0% { opacity: 0; }
    33% { opacity: 0; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}

新的 CSS

#animation{
    width: 200px;
    height: 60px;
}
.one, .two, .tree, .four{
    position: absolute;
    width: 200px;
    height: 60px;
    display: block;
}
.one{
    background-color: red;
    opacity: 0;
    -webkit-animation: one 30s infinite linear;
    /*-webkit-transition: all .2s ease-in-out;*/
    -webkit-transform: scale(0.9,0.9);
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: .05s;
}
.two{
    background-color: green;
    opacity: 0;
    -webkit-animation: two 30s infinite linear;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: .05s;
}
.tree{
    background-color: gray;
    opacity: 0;
    -webkit-animation: tree 30s infinite linear;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: .05s;
}
.four{
    background-color: purple;
    opacity: 0;
    -webkit-animation: four 30s infinite linear;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: .05s;
}
@-webkit-keyframes one {
    0% { opacity: 1; 
    }
    5%{
        -webkit-transform: scale(1.1,1.1); 
    }
    10%{
        -webkit-transform: scale(1.1,1.1); 
        opacity: 1; 
    }
    15%{
        -webkit-transform: scale(1.1,1.1);
        opacity: 1; 
    }
    20% { 
        -webkit-transform: scale(0.5,0.5);
        opacity: 0; 
    }


    25% { opacity: 0; }
    30% { opacity: 0; }
    35% { opacity: 0; }
    40% { opacity: 0; }
    45% { opacity: 0; }
    50% { opacity: 0; }
    55% { opacity: 0; }
    60% { opacity: 0; }
    65% { opacity: 0; }
    70% { opacity: 0; }
    75% { opacity: 0; }
    80% { opacity: 0; }
    85% { opacity: 0; }
    90% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes two {
    0% { opacity: 0; }
    5% { opacity: 0; }
    10% { opacity: 0; }
    15% { opacity: 0; }
    20% { opacity: 0; }

    25% { opacity: 1; }
    30% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    35% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    40% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    45% {
        -webkit-transform: scale(0.5,0.5); 
        opacity: 0; }


    50% { opacity: 0; }
    55% { opacity: 0; }
    60% { opacity: 0; }
    65% { opacity: 0; }
    70% { opacity: 0; }
    75% { opacity: 0; }
    80% { opacity: 0; }
    85% { opacity: 0; }
    90% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes tree {
    0% { opacity: 0; }
    5% { opacity: 0; }
    10% { opacity: 0; }
    15% { opacity: 0; }
    20% { opacity: 0; }
    25% { opacity: 0; }
    30% { opacity: 0; }
    35% { opacity: 0; }    
    40% { opacity: 0; }
    45% { opacity: 0; }


    50% { opacity: 1; }
    55% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    60% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    65% { 
         -webkit-transform: scale(1.2,1.2
        opacity: 1; }
    70% { 
        -webkit-transform: scale(0.5,0.5);
        opacity: 0; }

    75% { opacity: 0; }
    80% { opacity: 0; }
    85% { opacity: 0; }
    90% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes four {
    0% { opacity: 0; }
    5% { opacity: 0; }
    10% { opacity: 0; }
    15% { opacity: 0; }
    20% { opacity: 0; }
    25% { opacity: 0; }
    30% { opacity: 0; }
    35% { opacity: 0; }
    40% { opacity: 0; }
    45% { opacity: 0; }
    50% { opacity: 0; }
    55% { opacity: 0; }    
    60% { opacity: 0; }
    65% { opacity: 0; }
    70% { opacity: 0; }

    75% { opacity: 1; }
    80% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    85% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    90% { 
         -webkit-transform: scale(1.2,1.2);
        opacity: 1; }
    95% { 
        -webkit-transform: scale(0.8,0.8);
        opacity: 0.5; }
    100% { 
        -webkit-transform: scale(0.5,0.5);
        opacity: 0; }
}

【讨论】：

嗨，谢谢你，有没有办法让它不会逆转，但它会回到开始？我也可以将脉冲动画集成到其中还是需要分开？
（目前它正在运行 1,2,3,4,3,2,1）同时它们重叠你将如何做到这一点，所以淡入和淡出之间存在差距?
请多解释（参考这个-webkit-animation: four 12s infinite linear;）
我需要您创建的内容像我的问题中的演示一样同时淡入和跳动。然后它需要暂停然后淡出。所有这些都需要在一个循环中发生。目前你已经有了淡入淡出部分，但是过渡相互重叠，一旦完成一、二、树、四，它会倒退吗？我希望它回到开始。
感谢您的回复，我似乎无法让它工作，您还有以前的 jsFiddle 吗？