Css循环动画

时间：2016-06-17 13:24:57

标签： html css3 animation

我的动画有问题，这些词应该迭代'n'次

上面提到的代码有9个不同的单词，一个接一个地淡入淡出动画，但这个动画只有一次。我需要的是循环使用相同的动画一次又一次地迭代，因为最后一个单词结束时应该加载第一个。

这是html / css代码：

    h1.main,p.demos {
    	-webkit-animation-delay: 18s;
    	-moz-animation-delay: 18s;
    	-ms-animation-delay: 18s;
    	animation-delay: 18s;
    }
    .sp-container {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 100%;
    	height: 100%;
    	z-index: 0;
    	background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    	background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    	background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    	background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    }
    .sp-content {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	left: 0px;
    	top: 0px;
    	z-index: 1000;
    }
    .sp-container h2 {
    	position: absolute;
    	top: 50%;
    	line-height: 100px;
    	height: 90px;
    	margin-top: -50px;
    	font-size: 90px;
    	width: 100%;
    	text-align: center;
    	color: transparent;
    	-webkit-animation: blurFadeInOut 3s ease-in backwards;
    	-moz-animation: blurFadeInOut 3s ease-in backwards;
    	-ms-animation: blurFadeInOut 3s ease-in backwards;
    	animation: blurFadeInOut 3s ease-in backwards;
    }

    .sp-container h2.frame-6 {
    	-webkit-animation-delay:0s;
    	-moz-animation-delay: 0s;
    	-ms-animation-delay: 0s;
    	animation-delay: 0s;
    }

    .sp-container h2.frame-1 {
    	-webkit-animation-delay: 3s;
    	-moz-animation-delay: 3s;
    	-ms-animation-delay: 3s;
    	animation-delay: 3s;
    }
    .sp-container h2.frame-2 {
    	-webkit-animation-delay: 6s;
    	-moz-animation-delay: 6s;
    	-ms-animation-delay: 6s;
    	animation-delay: 6s;
    }
    .sp-container h2.frame-3 {
    	-webkit-animation-delay: 9s;
    	-moz-animation-delay: 9s;
    	-ms-animation-delay: 9s;
    	animation-delay: 9s;
    }
    .sp-container h2.frame-4 {
    	font-size: 200px;
    	-webkit-animation-delay: 12s;
    	-moz-animation-delay: 12s;
    	-ms-animation-delay: 12s;
    	animation-delay: 12s;
    }

    .sp-container h2.frame-7 {
    	font-size: 200px;
    	-webkit-animation-delay: 15s;
    	-moz-animation-delay: 15s;
    	-ms-animation-delay: 15s;
    	animation-delay: 15s;
    }

    .sp-container h2.frame-8 {
    	font-size: 200px;
    	-webkit-animation-delay: 18s;
    	-moz-animation-delay: 18s;
    	-ms-animation-delay: 18s;
    	animation-delay: 18s;
    }


    .sp-container h2.frame-9 {
    	font-size: 200px;
    	-webkit-animation-delay: 21s;
    	-moz-animation-delay: 21s;
    	-ms-animation-delay: 21s;
    	animation-delay: 21s;
    }


    .sp-container h2.frame-5 {
    	font-size: 200px;
    	-webkit-animation-delay: 24s;
    	-moz-animation-delay: 24s;
    	-ms-animation-delay: 24s;
    	animation-delay: 24s;
    }



    /* .sp-container h2.frame-5 span {
    	-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
    	-moz-animation: blurFadeIn 1s ease-in 12s backwards;
    	-ms-animation: blurFadeIn 3s ease-in 12s backwards;
    	animation: blurFadeIn 3s ease-in 12s backwards;
    	color: transparent;
    	text-shadow: 0px 0px 1px #fff;
    } */
    .sp-container h2.frame-5 span:nth-child(2) {
    	-webkit-animation-delay: 13s;
    	-moz-animation-delay: 13s;
    	-ms-animation-delay: 13s;
    	animation-delay: 13s;
    }
    .sp-container h2.frame-5 span:nth-child(3) {
    	-webkit-animation-delay: 14s;
    	-moz-animation-delay: 14s;
    	-ms-animation-delay: 14s;
    	animation-delay: 14s;
    }
    .sp-globe {
    	position: absolute;
    	width: 282px;
    	height: 273px;
    	left: 50%;
    	top: 50%;
    	margin: -137px 0 0 -141px;
    	background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
    	-webkit-animation: fadeInBack 3.6s linear 14s backwards;
    	-moz-animation: fadeInBack 3.6s linear 14s backwards;
    	-ms-animation: fadeInBack 3.6s linear 14s backwards;
    	animation: fadeInBack 3.6s linear 14s backwards;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    	filter: alpha(opacity=30);
    	opacity: 0.3;
    	-webkit-transform: scale(5);
    	-moz-transform: scale(5);
    	-o-transform: scale(5);
    	-ms-transform: scale(5);
    	transform: scale(5);
    	
    }
    .sp-circle-link {
    	position: absolute;
    	left: 50%;
    	bottom: 100px;
    	margin-left: -50px;
    	text-align: center;
    	line-height: 100px;
    	width: 100px;
    	height: 100px;
    	background: #fff;
    	color: #3f1616;
    	font-size: 25px;
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	-webkit-animation: fadeInRotate 1s linear 16s backwards;
    	-moz-animation: fadeInRotate 1s linear 16s backwards;
    	-ms-animation: fadeInRotate 1s linear 16s backwards;
    	animation: fadeInRotate 1s linear 16s backwards;
    	-webkit-transform: scale(1) rotate(0deg);
    	-moz-transform: scale(1) rotate(0deg);
    	-o-transform: scale(1) rotate(0deg);
    	-ms-transform: scale(1) rotate(0deg);
    	transform: scale(1) rotate(0deg);
    }
    .sp-circle-link:hover {
    	background: #85373b;
    	color: #fff;
    }
    /**/
    @-webkit-keyframes blurFadeInOut{
    	0%{
    		opacity: 0;
    		text-shadow: 0px 0px 40px #fff;
    		-webkit-transform: scale(1.3);
    	}
    	20%,75%{
    		opacity: 1;
    		text-shadow: 0px 0px 1px #fff;
    		-webkit-transform: scale(1);
    	}
    	100%{
    		opacity: 0;
    		text-shadow: 0px 0px 50px #fff;
    		-webkit-transform: scale(0);
    	}
    }
    @-webkit-keyframes blurFadeIn{
    	0%{
    		opacity: 0;
    		text-shadow: 0px 0px 40px #fff;
    		-webkit-transform: scale(1.3);
    	}
    	50%{
    		opacity: 0.5;
    		text-shadow: 0px 0px 10px #fff;
    		-webkit-transform: scale(1.1);
    	}
    	100%{
    		opacity: 1;
    		text-shadow: 0px 0px 1px #fff;
    		-webkit-transform: scale(1);
    	}
    }
    @-webkit-keyframes fadeInBack{
    	0%{
    		opacity: 0;
    		-webkit-transform: scale(0);
    	}
    	50%{
    		opacity: 0.4;
    		-webkit-transform: scale(2);
    	}
    	100%{
    		opacity: 0.2;
    		-webkit-transform: scale(5);
    	}
    }
    @-webkit-keyframes fadeInRotate{
    	0%{
    		opacity: 0;
    		-webkit-transform: scale(0) rotate(360deg);
    	}
    	100%{
    		opacity: 1;
    		-webkit-transform: scale(1) rotate(0deg);
    	}
    }
    /**/
    @-moz-keyframes blurFadeInOut{
    	0%{
    		opacity: 0;
    		text-shadow: 0px 0px 40px #fff;
    		-moz-transform: scale(1.3);
    	}
    	20%,75%{
    		opacity: 1;
    		text-shadow: 0px 0px 1px #fff;
    		-moz-transform: scale(1);
    	}
    	100%{
    		opacity: 0;
    		text-shadow: 0px 0px 50px #fff;
    		-moz-transform: scale(0);
    	}
    }
    @-moz-keyframes blurFadeIn{
    	0%{
    		opacity: 0;
    		text-shadow: 0px 0px 40px #fff;
    		-moz-transform: scale(1.3);
    	}
    	100%{
    		opacity: 1;
    		text-shadow: 0px 0px 1px #fff;
    		-moz-transform: scale(1);
    	}
    }
    @-moz-keyframes fadeInBack{
    	0%{
    		opacity: 0;
    		-moz-transform: scale(0);
    	}
    	50%{
    		opacity: 0.4;
    		-moz-transform: scale(2);
    	}
    	100%{
    		opacity: 0.2;
    		-moz-transform: scale(5);
    	}
    }
    @-moz-keyframes fadeInRotate{
    	0%{
    		opacity: 0;
    		-moz-transform: scale(0) rotate(360deg);
    	}
    	100%{
    		opacity: 1;
    		-moz-transform: scale(1) rotate(0deg);
    	}
    }
    /**/
    @keyframes blurFadeInOut{
    	0%{
    		opacity: 0;
    		text-shadow: 0px 0px 40px #fff;
    		transform: scale(1.3);
    	}
    	20%,75%{
    		opacity: 1;
    		text-shadow: 0px 0px 1px #fff;
    		transform: scale(1);
    	}
    	100%{
    		opacity: 0;
    		text-shadow: 0px 0px 50px #fff;
    		transform: scale(0);
    	}
    }
    @keyframes blurFadeIn{
    	0%{
    		opacity: 0;
    		text-shadow: 0px 0px 40px #fff;
    		transform: scale(1.3);
    	}
    	50%{
    		opacity: 0.5;
    		text-shadow: 0px 0px 10px #fff;
    		transform: scale(1.1);
    	}
    	100%{
    		opacity: 1;
    		text-shadow: 0px 0px 1px #fff;
    		transform: scale(1);
    	}
    }
    @keyframes fadeInBack{
    	0%{
    		opacity: 0;
    		transform: scale(0);
    	}
    	50%{
    		opacity: 0.4;
    		transform: scale(2);
    	}
    	100%{
    		opacity: 0.2;
    		transform: scale(5);
    	}
    }
    @keyframes fadeInRotate{
    	0%{
    		opacity: 0;
    		transform: scale(0) rotate(360deg);
    	}
    	100%{
    		opacity: 1;
    		transform: scale(1) rotate(0deg);
    	}
    }
<div class="container">
    <div class="header">
        <div class="clr"></div>
    </div>
    <div class="sp-container">
        <div class="sp-content">
            <div class="sp-globe"></div>
				<h2 style="font-size:75px;font-family:bold;" class="frame-6"><span>WE </span> <span>STAND </span> <span>FOR</span></h2>
            	<h2 style="font-size:68px;" class="frame-1">INNOVATION</h2>
                <h2 style="font-size:68px;" class="frame-2">QUALITY</h2>
            	<h2 style="font-size:68px;" class="frame-3">RELIABILITY</h2>
				<h2 style="font-size:68px;" class="frame-4">SAFETY</h2>
            	<h2 style="font-size:68px;" class="frame-7">VALUES</h2>
				<h2 style="font-size:68px;" class="frame-8">HARMONY</h2>
            	<h2 style="font-size:68px;" class="frame-9">UNITY</h2>
            	<h2 style="font-size:75px;font-family:bold;" class="frame-5"><span>CUSTOMER</span> </h2>


        </div>
		
    </div>
</div>

1 个答案:

答案 0 :(得分：2)

我不太了解您的代码，但您可以做的是为每个元素创建一个动画，并为动画的每个元素定义相同的持续时间（总动画时间）。 在那之后，你只需要处理＆＃34;当＆＃34;使用％

在我的示例中，我将处理4个元素，因此每个元素的总时间的25％（fadeIn fadeOut的+/- 5％）

＆＃13;
＆＃13; 
.el-1, .el-2, .el-3, .el-4 {
  position: absolute;
  width: 100px;
  height: 100px;
  animation-duration: 10s; /* Total time */
  animation-iteration-count: infinite;
  animation-delay: 0; /* by default */     
}
.el-1 {
  animation-name: example-1;
  background: red;
}
.el-2 {
  animation-name: example-2;
  background: green;
}
.el-3 {
  animation-name: example-3;
  background: blue;
}
.el-4 {
  animation-name: example-4;
  background: yellow;
}


@keyframes example-1 {
    0%   {opacity: 0;}
    5%   {opacity: 1;}
    20%  {opacity: 1;}
    30%  {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes example-2 {
    0%   {opacity: 0;}
    20%  {opacity: 0;}
    30%  {opacity: 1;}
    40%  {opacity: 1;}
    60%  {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes example-3 {
    0%   {opacity: 0;}
    40%  {opacity: 0;}
    60%  {opacity: 1;}
    70%  {opacity: 1;}
    80%  {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes example-4 {
    0%   {opacity: 0;}
    70%  {opacity: 0;}
    80%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {opacity: 0;}
}
＆＃13; 
<div class="el-1">1</div>
<div class="el-2">2</div>
<div class="el-3">3</div>
<div class="el-4">4</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题