使用CSS放大动画效果无法正常工作

Question

我为动画放大功能添加了css代码，但工作正常，但是问题是我没有编写用于缩小的代码，但是图像同时显示了放大和放大功能。

string input1 = "India Delhi, UK London, US Newyork (except Los Angeles), Europe France (except Paris)";
var m1 = Regex.Matches(input1, @"[A-Z][\w ]+(?:, [\w ]+)*");
foreach (Match match in m1)
{
    Console.WriteLine(match.Value);
}

我写了css来进行放大，但是它也可以进行缩小。我不想缩小选项，只需要放大图像即可。

Answer 1

更改

• 将infinite替换为forwards

• @keyframes是渐进式的，因此它是：

  @keyframes zoomin {
    0% {
      transform: scale(1);
    }
    50% {
      /* Changed to 1.25 */
      transform: scale(1.5);
    }
    100% {
      /* Changed to 1.5 */
      transform: scale(1);
    }
  }
  

  在0%的开头是正常大小scale(1)，然后在50%的一半处变大了scale(1.5)，但是在结尾100%时它缩小了到正常大小scale(1)。

• transform-origin: top left已添加，以定位图像以避免裁切。

---

演示

.slotholder {
  animation: zoomin 10s ease-in forwards;
  transform-origin: top left;
}

@keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.5);
  }
}

<div class="slotholder"><img src="https://smileaz.com/wp-content/uploads/sites/45/2018/07/types-of-dentures.jpg" width='300'></div>