淡入和脉冲文本,暂停,然后循环播放CSS3关键帧淡出?

时间:2014-03-24 18:40:39

标签: html css3 animation infinite pulse

我很难了解如何通过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;
    }
    
  • 1 个答案:

    答案 0 :(得分:2)

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