How can I fix my CSS @keyframe animation that is not starting as expected?
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>
I've noticed that the background:green; in the #left-container:target works fine, indicating that the :target selector functions correctly. However, the animation does not trigger.