[英]css keyframes animation not initializing
I've got a css @keyframe animation I'm trying to initiate but it never starts... What am I doing wrong? 我正在尝试启动一个css @keyframe动画,但是它永远不会开始...我在做什么错?
http://jsfiddle.net/sadmicrowave/VKzXp/ 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>
Notice the background:green;
注意
background:green;
attribute/property in the #left-container:target
declaration. #left-container:target
声明中的属性/属性。 That portion actually works, so I know the :target
is working; 那部分实际上有效,所以我知道
:target
在起作用; just not the animation. 而不是动画。
You have defined both animation-timing-function: linear;
您已经定义了两个
animation-timing-function: linear;
and animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
and you also had a typo in the #left-container{ position:aboslute;}
而且您在
#left-container{ position:aboslute;}
也有错字
I've fixed the typo and removed animation-timing-function: linear;
我修复了错字并删除了
animation-timing-function: linear;
- is this how you want it ? -这是你想要的吗? Demo
演示版
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.