0

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

4

1 に答える 1

1

と の両方animation-timing-function: linear;を定義animation-timing-function: ease-in-out;しましたが、#left-container{ position:aboslute;}

タイプミスを修正して削除しましたanimation-timing-function: linear;- これでよろしいですか? デモ

お役に立てれば。

于 2013-05-10T21:03:25.047 に答える