css keyframes анимация не инициализируется

Question

У меня есть анимация css @keyframe, которую я пытаюсь инициировать, но она никогда не начинается ... Что я делаю неправильно?

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> 

background:green; Обратите внимание на атрибут/свойство в #left-container:target декларации. Эта часть действительно работает, поэтому я знаю, что работает :target; просто не анимация.

Answer 1

Вы определили как animation-timing-function: linear; и animation-timing-function: ease-in-out;, и вы также имели опечатку в #left-container{ position:aboslute;}

Я исправил опечатку и удалить animation-timing-function: linear; - это, как вы хотите? Demo

Надеюсь, это поможет.