CSS动画：如何在每次迭代后应用变换？

我想在一个容器div内设置4个div的列表。CSS动画：如何在每次迭代后应用变换？

我希望在每秒钟之后移动它们。

我已经定义了2个动画：scaleUp和slideUp。

@keyframes scaleUp { 
0%{ 
    transform: scale(1) translateY(0); 
    } 
100%{ 
    transform: scale(1.15) translateY(-90px); 
    } 
}

和

@keyframes slideUp { 
    0%{ 
    transform: translateY(0); 
    } 
    100%{ 
    transform: translateY(-90px); 
    } 
}

我那么应用的动画的div下列方式：

.animated:nth-child(1){ 
    animation: slideUp 1s 4, scaleUp 1s ease; 
} 

.animated:nth-child(2){ 
    animation: slideUp 1s 4, scaleUp 1s ease 1s; 
} 

.animated:nth-child(3){ 
    animation: slideUp 1s 4, scaleUp 1s ease 2s; 
} 

.animated:nth-child(4){ 
    animation: slideUp 1s 4, scaleUp 1s ease 3s; 
}

，其中动画是我给的div类。

问题是，动画在每次迭代之后都会重置，并且div在每次迭代之后从初始位置开始。

我在slideUp上试过animation-fill-mode: forwards，但只有在所有4次迭代完成后才能应用转换。如何在每次迭代后应用转换？

P.S. You can view the code here

来源

2017-06-01 priyank1205

你能在这个项目上使用JavaScript，或者你仅限于CSS？ –

@ArnauFernández我仅限于此项目的CSS。 – priyank1205

你需要让你的动画效果基本show去了4关键帧-90px每一个帧，然后对基于他们的位置在动画的时候每箱一个单独的按比例扩大的动画：

/*.center{ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}*/ 
 

 
.container{ 
 
    /*border: 1px solid black;*/ 
 
    margin-top: 50px; 
 
    padding-top: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.card { 
 
    /*border: 1px solid black;*/ 
 
    padding: 20px 10px; 
 
    margin: 20px auto; 
 
    background-color: #fff; 
 
    box-shadow: 1px 3px 4px 1px rgba(5,5,5,0.14); 
 
    width: 300px; 
 
    height: 50px; 
 
    text-align: center; 
 
} 
 

 
/*.active{ 
 
    transform: scale(1.2); 
 
}*/ 
 

 
@keyframes scaleUp { 
 
    0%{ 
 
    transform: scale(1) translateY(0); 
 
    } 
 
    100%{ 
 
    transform: scale(1.15) translateY(-90px); 
 
    } 
 
} 
 

 
@keyframes scaleUp1 { 
 
    0%{ 
 
    transform: scale(1) translateY(-90px); 
 
    } 
 
    100%{ 
 
    transform: scale(1.15) translateY(-180px); 
 
    } 
 
} 
 

 
@keyframes scaleUp2 { 
 
    0%{ 
 
    transform: scale(1) translateY(-180px); 
 
    } 
 
    100%{ 
 
    transform: scale(1.15) translateY(-270px); 
 
    } 
 
} 
 

 
@keyframes scaleUp3 { 
 
    0%{ 
 
    transform: scale(1) translateY(-270px); 
 
    } 
 
    100%{ 
 
    transform: scale(1.15) translateY(-360px); 
 
    } 
 
} 
 

 
@keyframes slideUp { 
 
    0%{ 
 
    transform: translateY(0); 
 
    } 
 
    25%{ 
 
    transform: translateY(-90px); 
 
    } 
 
    50%{ 
 
    transform: translateY(-180px); 
 
    } 
 
    75%{ 
 
    transform: translateY(-270px); 
 
    } 
 
    100%{ 
 
    transform: translateY(-360px); 
 
    } 
 
} 
 

 
.animated:nth-child(1){ 
 
    animation: slideUp 4s, scaleUp 1s ease; 
 
    animation-play-state: running; 
 
    /*animation-iteration-count: infinite;*/ 
 
} 
 
.animated:nth-child(2){ 
 
    animation: slideUp 4s, scaleUp1 1s ease 1s; 
 
    animation-play-state: running; 
 
    /*animation-iteration-count: infinite;*/ 
 
} 
 
.animated:nth-child(3){ 
 
    animation: slideUp 4s, scaleUp2 1s ease 2s; 
 
    animation-play-state: running; 
 
    /*animation-iteration-count: infinite;*/ 
 
} 
 
.animated:nth-child(4){ 
 
    animation: slideUp 4s, scaleUp3 1s ease 3s; 
 
    animation-play-state: running; 
 
    /*animation-iteration-count: infinite;*/ 
 
}

<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>test html</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="card animated"> 
 
     1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     </div> 
 
     <div class="card animated"> 
 
     2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     </div> 
 
     <div class="card animated"> 
 
     3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     </div> 
 
     <div class="card animated"> 
 
     4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

来源

2017-06-01 11:14:44 Pete

工作。非常感谢！是否有替代定义四个动画（scaleUp 1,2,3,4），这将确保css文件的大小尽可能小？ – priyank1205

嗯，不要以为你可以 - 你需要某种类似sass或更少的预处理器（但是，我认为它只是生成一个css文件，它仍然是相同的大小） – Pete

CSS动画：如何在每次迭代后应用变换？

回答

相关问题