html - 打开页面时缩放和淡入

首要问题：
我一直试图做到这一点，但没有任何效果。正如页面加载时一样，我希望图像按比例缩小并逐渐消失并坐在那里。该图像也是一个链接。

到目前为止，我没有任何动画即可工作的代码是

html--

<a href="index.html">
    <img src="images/insandoutslogo.jpg" alt="" class="insandoutslogoimg" />
    <p1> Ins and Outs </p1>
</a>

CSS ---

.insandoutslogoimg
{
    width: 210px;
    height: 210px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -112.5px;
    margin-left: -112.5px;
}

谢谢！

最佳答案

这个问题很难理解。但是也许您正在寻找这样的东西：

.insandoutslogoimg {
  width: 210px;
  height: 210px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -112.5px;
  margin-left: -112.5px;

  animation: fadeInDown 2s ease;
}

@keyframes fadeInDown {

  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

CodePen demo

您还需要browser prefixes（CodePen使用Lea Verou -prefix-free）

关于html - 打开页面时缩放和淡入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18799722/