循环重复整个CSS序列

时间：2018-07-10 13:13:21

标签： javascript html css loops

我有一段代码可以使div中的文本动画化。我希望整个动画在循环中重复。将所有文件都保留在内部非常重要，因为它将成为GoogleAds广告，并且它们不接受外部链接。理想情况下，如果可以使用CSS或纯JavaScript（不是jquery）完成

代码如下：

* {
  font-family: 'Comfortaa'
}

.ad {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  color: #3a3a3a;
  background: #0E6AAD;
  width: 300px;
  height: 250px;
  background-size: 300px 250px;
}

.h1-background {
  color: white;
  text-align: center;
}

h1 {
  font-family: 'Baloo';
  position: relative;
  padding: 10px;
  padding-bottom: 0;
  font-size: 24px;
  font-weight: normal;
  margin: 0;
  z-index: 1;
}

h2 {
  position: relative;
  padding: 0 10px;
  font-size: 16px;
  z-index: 1;
}
<div class="ad">
  <div class="h1-background">
    <h1 class="slide-up-fade-in">Title
      <h1>
        <h2 class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
  </div>
  <button id="cta" class="slide-up-fade-in delay-1">
        read more
    </button>
</div>

jfiddle here

谢谢您的帮助。

3 个答案:

答案 0 :(得分：1)

尝试一下：

.slide-up-fade-in{
    animation: slide-up-fade-in ease 4s;
    animation-iteration-count: infinite;
    animation-delay: 0.25s;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.25s;}

答案 1 :(得分：1)

我希望这就是您的期望。 

setInterval(function(){ 
	document.getElementById("cta").classList.remove("slide-up-fade-in");
	document.getElementById("cta").classList.remove("delay-1");
        document.getElementById("subtitle").classList.remove("slide-up-fade-in");
	document.getElementById("subtitle").classList.remove("delay-2");
        document.getElementById("title").classList.remove("slide-up-fade-in");  
}, 2900);
setInterval(function(){ 
        document.getElementById("title").classList.add("slide-up-fade-in");  
        document.getElementById("subtitle").classList.add("slide-up-fade-in");
	document.getElementById("subtitle").classList.add("delay-2");
        document.getElementById("cta").classList.add("slide-up-fade-in");
	document.getElementById("cta").classList.add("delay-1");
}, 3000);
* {
     font-family:'Comfortaa'
  }
.ad{
      margin:0 auto;
      overflow:hidden;
      position:relative;
      color:#3a3a3a;
      background: #0E6AAD;
      width:300px; height:250px; 
      background-size: 300px 250px;
    }

    .h1-background{
      color:white;
      text-align:center;
    }

    h1{
      font-family:'Baloo';
      position:relative;
      padding:10px;
      padding-bottom:0;
      font-size:24px;
      font-weight:normal;
      margin:0;
      z-index:1;
    }
    h2{
      position:relative;
      padding:0 10px;
      font-size:16px;
      z-index:1;
    }


    button{
      padding:10px 20px;
      font-size:12px;
      background-color:#4285f4;
      border:none;
      color:white;
      position:fixed;
      cursor:pointer;
      border-radius:50px;  
      width:180px;
      left: 50%;
        margin-left: -90px; /*half the width*/
        z-index:9999;
        top:210px;
    }



    .slide-up-fade-in{
        animation: slide-up-fade-in ease 0.5s infinite;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode:forwards; /*when the spec is finished*/
        -webkit-animation: slide-up-fade-in ease 0.5s infinite;
        -webkit-animation-iteration-count: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
        -moz-animation: slide-up-fade-in ease 0.5s infinite;
        -moz-animation-iteration-count: 1;
        -moz-transform-origin: 50% 50%;
        -moz-animation-fill-mode:forwards; /*FF 5+*/
        -o-animation: slide-up-fade-in ease 0.5s infinite;
        -o-animation-iteration-count: 1;
        -o-transform-origin: 50% 50%;
        -o-animation-fill-mode:forwards; /*Not implemented yet*/
        -ms-animation: slide-up-fade-in ease 0.5s infinite;
        -ms-animation-iteration-count: 1;
        -ms-transform-origin: 50% 50%;
        -ms-animation-fill-mode:forwards; /*IE 10+*/

        opacity:0;
        opacity: 1\9;

    }

    .delay-1{animation-delay: 0.25s;}
    .delay-2{animation-delay: 0.5s;}


    @keyframes slide-up-fade-in{
        0% {
            opacity:0;
            transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            transform:  translate(0px,0px)  ;
        }
    }

    @-moz-keyframes slide-up-fade-in{
        0% {
            opacity:0;
            -moz-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -moz-transform:  translate(0px,0px)  ;
        }
    }

    @-webkit-keyframes slide-up-fade-in {
        0% {
            opacity:0;
            -webkit-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -webkit-transform:  translate(0px,0px)  ;
        }
    }

    @-o-keyframes slide-up-fade-in {
        0% {
            opacity:0;
            -o-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -o-transform:  translate(0px,0px)  ;
        }
    }

    @-ms-keyframes slide-up-fade-in {
        0% {
            opacity:0;
            -ms-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -ms-transform:  translate(0px,0px)  ;
        }
    }
<div class="ad">
    <div class="h1-background">
	    <h1 id="title" class="slide-up-fade-in">Title<h1>
			<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
		</div>
		<button id="cta" class="slide-up-fade-in delay-1">
			read more
		</button>
	</div>

或在jsfidle中：https://jsfiddle.net/hbw1uetr/22/

编辑 如果要循环n次，则需要指定销毁setInterval函数的时间。头可以找到更新的jsfiddle https://jsfiddle.net/hbw1uetr/59/ 

function setIntervalX(callback, delay, repetitions) {
    var x = 0;
    var intervalID = window.setInterval(function () {
       callback();
       if (++x === repetitions) {
           window.clearInterval(intervalID);
       }
    }, delay);
}
setIntervalX(function () {
		document.getElementById("cta").classList.remove("slide-up-fade-in");
		document.getElementById("cta").classList.remove("delay-1");
    document.getElementById("subtitle").classList.remove("slide-up-fade-in");
		document.getElementById("subtitle").classList.remove("delay-2");
    document.getElementById("title").classList.remove("slide-up-fade-in");  
}, 2900, 2);
setIntervalX(function () { 
    document.getElementById("title").classList.add("slide-up-fade-in");  
    document.getElementById("subtitle").classList.add("slide-up-fade-in");
		document.getElementById("subtitle").classList.add("delay-2");
    document.getElementById("cta").classList.add("slide-up-fade-in");
		document.getElementById("cta").classList.add("delay-1");
}, 3000, 2); //2 is the number of repition
    * {
      font-family:'Comfortaa'
    }



    .ad{
      margin:0 auto;
      overflow:hidden;
      position:relative;
      color:#3a3a3a;
      background: #0E6AAD;
      width:300px; height:250px; 
      background-size: 300px 250px;
    }

    .h1-background{
      color:white;
      text-align:center;
    }

    h1{
      font-family:'Baloo';
      position:relative;
      padding:10px;
      padding-bottom:0;
      font-size:24px;
      font-weight:normal;
      margin:0;
      z-index:1;
    }
    h2{
      position:relative;
      padding:0 10px;
      font-size:16px;
      z-index:1;
    }


    button{
      padding:10px 20px;
      font-size:12px;
      background-color:#4285f4;
      border:none;
      color:white;
      position:fixed;
      cursor:pointer;
      border-radius:50px;  
      width:180px;
      left: 50%;
        margin-left: -90px; /*half the width*/
        z-index:9999;
        top:210px;
    }



    .slide-up-fade-in{
        animation: slide-up-fade-in ease 0.5s infinite;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode:forwards; /*when the spec is finished*/
        -webkit-animation: slide-up-fade-in ease 0.5s infinite;
        -webkit-animation-iteration-count: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
        -moz-animation: slide-up-fade-in ease 0.5s infinite;
        -moz-animation-iteration-count: 1;
        -moz-transform-origin: 50% 50%;
        -moz-animation-fill-mode:forwards; /*FF 5+*/
        -o-animation: slide-up-fade-in ease 0.5s infinite;
        -o-animation-iteration-count: 1;
        -o-transform-origin: 50% 50%;
        -o-animation-fill-mode:forwards; /*Not implemented yet*/
        -ms-animation: slide-up-fade-in ease 0.5s infinite;
        -ms-animation-iteration-count: 1;
        -ms-transform-origin: 50% 50%;
        -ms-animation-fill-mode:forwards; /*IE 10+*/

        opacity:0;
        opacity: 1\9;

    }

    .delay-1{animation-delay: 0.25s;}
    .delay-2{animation-delay: 0.5s;}


    @keyframes slide-up-fade-in{
        0% {
            opacity:0;
            transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            transform:  translate(0px,0px)  ;
        }
    }

    @-moz-keyframes slide-up-fade-in{
        0% {
            opacity:0;
            -moz-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -moz-transform:  translate(0px,0px)  ;
        }
    }

    @-webkit-keyframes slide-up-fade-in {
        0% {
            opacity:0;
            -webkit-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -webkit-transform:  translate(0px,0px)  ;
        }
    }

    @-o-keyframes slide-up-fade-in {
        0% {
            opacity:0;
            -o-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -o-transform:  translate(0px,0px)  ;
        }
    }

    @-ms-keyframes slide-up-fade-in {
        0% {
            opacity:0;
            -ms-transform:  translate(0px,60px)  ;
        }
        100% {
            opacity:1;
            -ms-transform:  translate(0px,0px)  ;
        }
    } 
	<div class="ad">
		<div class="h1-background">
			<h1 id="title" class="slide-up-fade-in">Title<h1>
			<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
		</div>
		<button id="cta" class="slide-up-fade-in delay-1">
			read more
		</button>
	</div>

答案 2 :(得分：0)

我发现了另一种方法（循环3次）：

.slide-up-fade-in{
animation: slide-up-fade-in ease 5s;
animation-iteration-count: 3;
animation-delay: 1.25s;
}

.delay-1{animation-delay: 1.25s;}
.delay-2{animation-delay: 1.5s;}


@keyframes slide-up-fade-in{
    0% {
        opacity:0;
        transform:  translate(0px,60px)  ;
    }
    10% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }        
    100% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
}

要永久循环，请将animation0iteration-count从3替换为无限

相关问题
最新问题