開始しようとしている 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
ます。アニメーションだけではありません。