ホームページ > 記事 > ウェブフロントエンド > CSS3 遷移プロパティ issue_html/css_WEB-ITnose について
css3 アニメーション効果
.transition{
-webkit-transition: すべての .5 秒のイーズ;
-o-transition: すべての .5 秒のイーズ;
ここでは次のようにtransform属性を適用したいだけです:
-webkit-transform:translateX(20px);
どのように書けばよいでしょうか?以下の書き方は効果がありません!
-webkit-transition: .5sease;
ディスカッションへの返信(解決策)
div
{
-webkit-transform: translation(50px,100px) /* Safari および Chrome */
-o-transform: translation(50px,100px) ; /* Opera */
-moz-transform: translation(50px,100px); /* Firefox */
}
トリガーイベントが必要のようです
CSS3 IE 互換コード オンライン変換 IE の CSS3 Transforms Translator
デモコード
.trans { width: 100px; height: 100px; background-color: yellow;}.trans:hover {/* W3C CSS3 standard */ transform: translateX(20px); /* Firefox */ -moz-transform: translateX(20px); /* webkit (Chrome, Safari, mobile browsers, etc) */ -webkit-transform: translateX(20px); /* Opera */ -o-transform: translateX(20px); /* IE>=9 */ -ms-transform: translateX(20px); /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand'); /* * To make the transform-origin be the middle of * the object. Note: These numbers * are approximations. For more accurate results, * use Internet Explorer with this tool. */ margin-left: 7px; margin-top: -3px; }
デモ更新バージョン
トランジションを追加