缩放动画

创建一个缩放动画。

• 使用 @keyframes 定义一个三步动画。在开始（0%）和结束（100%）时，元素保持原始大小（scale(1, 1)）。在中间（50%）时，元素放大到原始大小的1.5倍（scale(1.5, 1.5)）。
• 使用 width 和 height 给元素指定特定的大小。
• 使用 animation 设置元素的适当值，使其动画化。

<div class="zoom-in-out-box"></div>

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}