打开页面时缩放和淡入淡出

【问题标题】：Scale and fade upon page opening打开页面时缩放和淡入淡出
【发布时间】：2013-09-14 08:12:11
【问题描述】：

第一期：我一直在努力解决这个问题，但没有任何效果。就像页面加载一样，我希望图像可以缩放并淡化并坐在那里。图片也是一个链接。

到目前为止我没有任何动画的代码是

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;
}

谢谢大家！

【问题讨论】：

标签： html css jquery-animate scale transition

【解决方案1】：

这个问题很难理解。但也许你看起来像这样：

.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）

【讨论】：

这正是我正在寻找的，但是当我将代码添加到我的代码时它不起作用......？我什至指定了 -webkit-animation: fadeInDown 2s ease;它什么也没做……有什么想法吗？
我修好了！谢谢你是个天才！