html - How do use zoomIn feature using CSS3 -

I'm trying to make zoom in effects like this page:

Top "Mk" Logo zoom on page load.

I tried to copy the code and it is still with me, but it does not work:

html:

  & Lt; Div id = "header" & gt; & Lt; Div id = "toplogo" & gt; & Lt; H1 & gt; & Lt; A href = "http://www.pz.com" & gt; PageBuzz :: Think outside the box & lt; / A & gt; & Lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt;   
 CSS:  
  #header {width: 800px; Height: 80px; Animation: 0.4 S-in-out 0S Normal Forward 1 Zoom In; } #toplogo h1 {margin: 0; Padding: 0; } #toplogo h1A {display: block; Width: 212px; Height: 80px; Margin: 20 px 0; Background: URL ('http://www.interfaithmedical.com/pz/theimages/hdrLogo.png') No-repeat; Color: #fff; Font-size: 40px; Font-weight: 400; Profile: None; Text indent: -10000px; }   
 Jadefild example:    
 Every time I load a page, I am trying to fulfill that effect on my logo.  
  
 
 
 I think you mean "zoom out".  
 You are missing out on the actual animation list definition:  
  @keyframe zoom in {0% {opacity: 0; Consequently: scale (10); } 100% {/ * & lt; - Actually not necessary if these defaults / * Opacity: 1; Consequently: scale (1); }   
 And it appears that you are using the wrong shorthand property format (see the syntax section).  
 (Updated here)