Как использовать функцию ZoomIn с помощью CSS3

Question

Я пытаюсь создать эффект ZoomIn как эту страницу: Example Website

Верхняя «тк» логотип наезжает на странице загрузки.

Я попытался скопировать код, и это то, что я до сих пор, но это не работает:

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

И кажется, что вы используете неправильный формат сокращённого свойства (смотрите раздел синтаксиса here).

(вот обновленный JSFiddle)