0

これまでイージングを行ったことがなく、既存のコードでイージングが可能かどうかを調べようとしています。私はすでにcss a:hoverを持っています。既存のコードでフェードイン イージングを使用するにはどうすればよいですか?

#rbox a {height:48px;
         line-height:48px;
         padding-left:17px;
         padding-right:17px;
         float:left;
         color:#FFF;
         background:#c04747;
         font-size:17px
        }

#rbox a:hover {background:#6C6C6C;}



<div id="rbox"> <a href="mtf.com">Meet the Founder</a></div>
4

2 に答える 2

1

CSS3 イージングに関して注意すべきことの 1 つは、古いブラウザーではおそらくサポートされていないということです。その場合はjQueryを試すことができます。

一方、CSS3 イージング ルールを生成するための優れたツールは次のとおりです。

http://matthewlein.com/ceaser/

私が正しく理解している場合、コードは次のようになります。

#rbox a:hover
{
    background:#6C6C6C;
    -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}
于 2012-12-10T01:27:13.903 に答える
0

css3 遷移を意味する場合は、次のようにする必要があります。

#rbox a {
  ...
  transition: all .5s ease-in-out;
}

すべてのブラウザーのサポートが必要な場合は、必ずベンダー プレフィックスを追加してください。

于 2012-12-10T01:28:28.753 に答える