淡入和脉冲文本，暂停，然后淡出与CSS3关键帧在循环？

Question

我有一个困难的时间让我的头脑，我如何能够实现以下的css关键帧。

我目前有一个幻灯片，包含4张幻灯片，每次都有关键帧，并设置为无限循环。

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

如果有人能帮忙，我会非常感激的。

我偶然发现了这个示例，这是我想要实现的，但我需要4

• 然后让它跳动。我想不出我需要如何编辑关键帧。 我的幻灯片css如下所示 @-webkit-关键帧滑块{ 0%，20%，100%{左:0} 25%，45%{左：-100% } 50%，70%{左：-200% } 75%，95%{左：-300% }@-moz-关键帧滑块{ 0%，20%，100%{左:0} 25%，45%{左：-100% } 50%，70%{左:200%} 75%，95%{左：-300}@键帧滑块{ 0%，20%，100%{左:0} 25%，45%{左：-100} 50%，70%{左：-200% } 75%，95%{左：-300% }} #carousel .视频列表，#descriptionCarousel .描述-列表{位置:相对；宽度: 400%；高度: 100%；左边: 0；顶部: 0；底部: 0；动画:滑块45s立方-bezier(.93，.11，.32，.94)无限；-webkit-动画:滑块45s立方-bezier(.93，.11，.32，.94)无限；-moz-动画:滑块45s立方-bezier(.93，.11，.32，.94)无限；-o动画:滑块45s立方-bezier(.93，.11，.32，.94)无限；-ms-动画:滑块45s立方-bezier(.93，.11，.32，.94)无穷；-webkit-动画-播放状态:暂停；-moz-动画-播放状态:暂停；动画-播放状态:暂停；}

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