css 키 프레임 애니메이션이 초기화되지 않습니다.

Question

저는 CSS 키 프레임 애니메이션이 있습니다. 시작하려고하는데, 시작하지 않습니다 ... 무엇을 잘못하고 있습니까?

http://jsfiddle.net/sadmicrowave/VKzXp/

@-webkit-keyframes slideNotificationsHide { 
    0%{ width:70%; } 
    100%{ width:94%; left:0; right:0; } 
} 

#left-container{ 
position:aboslute; 
top:0px; right:30%; 
width:70%; height:100%; 
border:1px solid green; 
background:#eee; 
} 

#left-container:target{ 
    background:green; 
    -webkit-animation: slideNotificationsHide .6s ease-in-out linear forwards; 
    -moz-animation: slideNotificationsHide .6s ease-in-out linear forwards; 
    animation: slideNotificationsHide .6s ease-in-out linear forwards; 
} 


<div id='left-container'></div> 
<a href="#left-container">click to start animation</a> 

을 주목 #left-container:target 선언에서 background:green; 속성/프로퍼티. 그 부분은 실제로 작동하기 때문에 나는 :target이 작동 중임을 알고 있습니다. 단지 애니메이션이 아닙니다.

Answer 1

당신은 모두 animation-timing-function: linear; 및 animation-timing-function: ease-in-out;을 정의하고 또한 내가 오타를 고정 animation-timing-function: linear;을 삭제 한 #left-container{ position:aboslute;}

에 오타가 있었다 - 이것은 당신이 원하는 방법인가? Demo

희망이 도움이됩니다.