2011-09-12 5 views
3

を使用していない - 私はすべて複数CSS3のトランジションタイプIは、規模やCSS3トランジションを使用して、不透明度の両方を移行しようとしている「すべて」の

transition-function: all; 
transition-duration: 1s; 
transition-timing-function: ease-in; 
を使用せずに複数のものを移行する方法を考え出すことはできません

作品、同じよう:

transition: all 1s ease-in; 

transition-function: opacity; 

transition-function: scale; 

なく

transition-function: scale, opacity; 

ここでは例を参照してください。http://jsfiddle.net/5PCGs/7/

すべてのヘルプは本当にいただければ幸いです!ありがとう:)!

編集:

私はそれがtransition-property(感謝シモーネ)です働いているが、今ではFirefoxのみではなく、両方で不透明度をアニメーションだ - http://jsfiddle.net/5PCGs/9 - FFとChromeサイド・バイ・サイド

でこれを比較します
+0

ps:ベンダー固有のプレフィックスを使用しています。ここでは、プレース長を短くするために省略しています。 – Trolleymusic

答えて

12

Boris ZbarskySimone Vittoriのおかげで。

回答はtransition-propertyを使用し、そこで変換しているすべてのものを指定するのではなく、transformを値の1つとして入力し、クラス間の変換の違いを考慮してください。

transition-property: transform,opacity; 
transition-duration: 1s; 
transition-timing-function: ease-in; 

EDIT:はしないでくださいあなたは、これらに必要なすべての接頭辞を追加してもらうために。たとえばWebkitブラウザの場合:

-webkit-transition-property: -webkit-transform,opacity; 
-webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease-in; 

もう一度ありがとう!

+0

ようこそ。 – Simone

3

transition-functionの代わりにtransition-propertyを使用してください。実際は存在しません。 :)

各トランジションプロパティはコンマ区切りのリストを受け入れ、複数のトランジションを定義できます。

+0

はい、トランジション機能のプロパティはありません:http://www.w3.org/TR/css3-transitions/#transitions- – DuMaurier

+0

ありがとう!それは素晴らしいことです。今はChromeで動作しますが、スケール変換はFirefoxではまったく動作しません。私は見続けるだろう! – Trolleymusic

+0

FirefoxとChromeでこれを比較してください:http://jsfiddle.net/5PCGs/9/ Chromeは正常ですが、Firefoxはスケールをアニメーション化しません。あなたが '-moz-transform:scale(0);'を使うと、それはできますが、次にこれにopacityプロパティを含めることはできません。 よろしく! – Trolleymusic

関連する問題