我正在尝试为一个容器 div 中的 4 个 div 列表设置动画。
我希望每秒都将它们向上移动。
我定义了 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;
}
其中 animated 是我给 div 的类。
问题是，动画在每次迭代后重置，并且 div 在每次迭代后从其初始位置开始。
我在 slideUp 上尝试了 animation-fill-mode: forwards，但只有在所有 4 次迭代都完成后才会应用转换。如何在每次迭代后应用转换？
最佳答案
你需要让你的 slideup 动画每帧超过 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>关于CSS 动画 : How do I apply transform after every iteration?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44305225/