css关键帧动画未初始化

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>

注意#left-container:target 声明中的background:green; 属性/属性。那部分确实有效，所以我知道:target 有效；只是不是动画。

Answer 1

您同时定义了animation-timing-function: linear; 和animation-timing-function: ease-in-out;，并且您还在#left-container{ position:aboslute;} 中有错字

我已经修正了错字并删除了animation-timing-function: linear; - 这是你想要的吗？ Demo

希望这会有所帮助。