Question

我无法一个接一个地播放几个动画并产生“流畅”效果：

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1s, pulse 0.5s ease 1s;
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
		}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

<div id="circle"></div>

我做错了吗？我想将关键帧分开。

Answer 1

您可能需要考虑第二个上的forwards以保持其最后状态，因为实际上当两个动画结束时您的元素返回到缩放变换的初始值scale(1) （更确切地说，它是transform:none）

＆＃13;

#circle {
  border-radius: 50%;
  background: red;
  animation: zoomIn 1s, pulse 0.5s ease 1s forwards;
  height: 100px;
  width: 100px;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

＆＃13;

<div id="circle"></div>

＆＃13;

<强>更新

等待时间是由animation-timing-function使用的，ease两者都是ease-in，这意味着您将有一个缓出（最后缓慢）和缓入（缓慢start）在两个动画之间创建暂停的这种行为。如果您将第一个更改为ease-out而将最后一个更改为#circle { border-radius: 50%; background: red; animation: zoomIn 1s ease-in, pulse 0.5s ease-out 1s forwards; height: 100px; width: 100px; } @keyframes zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes pulse { from { transform: scale(1); } 100% { transform: scale(1.5); } }，则您不会遇到此问题。

＆＃13;

<div id="circle"></div>

＆＃13;

product: productColor (relation)

＆＃13;

Answer 2

你的脉冲动画以1.1的比例结束，然后你的圆圈快速回到比例1.脉冲关键帧可能如下：

@keyframes pulse {
        from {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
}

在下面的代码段中，您看不到对齐，但也许这不是您想要的效果？

#circle {
			border-radius: 50%;
			background: red;
			animation: zoomIn 1s, pulse 0.5s ease 1s;
			height: 100px;
			width: 100px;
		}

		@keyframes zoomIn {
			0% {
				transform: scale(0);
			}
			100% {
				transform: scale(1);
			}
		}

		@keyframes pulse {
			from {
				transform: scale(1);
			}
			50% {
				transform: scale(1.1);
			}
      100% {
         transform: scale(1);
      }
		}

<div id="circle"></div>

Answer 3

当您的圆圈缩放到1时，您需要一个短脉冲，这是我假设的流体效果。为什么我们不要稍微调整zoomIn动画中的关键帧，而不是使用不同的动画。

<强> HTML：

<div id="circle"></div>

<强> CSS：

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 0.4s ease-out;
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

希望这有帮助。

Answer 4

唯一的动画是'变换'，最好使用'计时功能'自定义，我建议公用事业'Cubic-bezier'去这个网站http://cubic-bezier.com并练习。在关于bezier曲线之前阅读。

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1s cubic-bezier(.4,.17,.49,1.54);
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

<div id="circle"></div>

更新

或其他'计时功能'

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1.5s cubic-bezier(.56,1,.92,.7);
    height: 100px;
    width: 100px;
    animation-fill-mode: forwards; /* */
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1.1);
    }
}

<div id="circle"></div>

如何在CSS中背靠背播放多个动画？

4 个答案: