我有一个 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
有效;只是不是动画。
最佳答案
您同时定义了 animation-timing-function: linear;
和 animation-timing-function: ease-in-out;
并且您在#left-container{ position:aboslute;}
我已经修复了拼写错误并删除了 animation-timing-function: linear;
- 这是您想要的吗? Demo
希望这对您有所帮助。
关于css关键帧动画未初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16487731/