html - 如何使用 CSS3 使用 zoomIn 功能

Question

我正在尝试像这个页面一样创建 zoomIn 效果：示例网站

顶部的“mk”标志在页面加载时放大。

我试图复制代码，这是我到目前为止所拥有的，但它不起作用：

html:

<div id="header">
    <div id="toplogo"><h1><a href="http://www.pz.com">PagesByZ:: Think Outside the Box</a></h1></div>
</div>

CSS：

#header {
    width: 800px;
    height: 80px;
    animation: 0.4s ease-in-out 0s normal forwards 1 zoomIn;
}
#toplogo h1 { 
    margin: 0; 
    padding: 0; 
}
#toplogo h1 a { 
    display: block; 
    width: 212px; 
    height: 80px; 
    margin: 20px 0 0; 
    background: url('http://www.interfaithmedical.com/pz/theImages/hdrLogo.png') no-repeat; 
    color: #fff; 
    font-size: 40px; 
    font-weight: 400; 
    outline: none; 
    text-indent: -10000px; 
}

JDFiddle 示例：http: //jsfiddle.net/n75rL/

每次页面加载时，我都试图在我的徽标上实现这种效果。

Answer 1

我想你的意思是“缩小”。

您缺少实际的动画列表定义：

@keyframes zoomIn{
  0% {
    opacity: 0;
    transform: scale(10);
  }
  100% {              /* <- not really required if these are the defaults */
    opacity: 1;
    transform: scale(1);
  }

而且您似乎使用了错误的速记属性格式（请参阅此处的语法部分）。

（这里是更新的JSFiddle）