特定のCSSの切り替え

Question

ボタンでアクティブになる画像をオフスクリーンに保存したい：アクティブ。

スタイル：

.image { 
    opacity: 0; 
    position: fixed; 
    top: -500px; 
    left: 20%; 
    transition:0.5s; 
} 
.button1:active .image01 { 
    opacity: 1; 
    top:5%; 
    left:20%; 
} 

私は彼らが不透明1 に不透明度0からフェードインしたい私は、遷移属性に入れたときしかし、それは不透明度と位置の両方をアニメーション化します。不透明度をアニメートして位置変更を瞬時に行う方法はありますか？

Answer 1

だけで、このような遷移にプロパティ（あなたのケースでopacity）を追加します。

transition-property: opacity; /*Default value is all */ 
transition-duration: 2s; /* Default value is 0 (no transition effect) */ 
transition-timing-function: linear; /* Default value is linear */ 
transition-delay: 1s; /* Default value is 0 */ 

：のトランジションは次のように個別に定義することができますより4つの特性を有している

.image { 
    opacity: 0; 
    position: fixed; 
    top: -500px; 
    left: 20%; 
    transition:opacity 0.5s; 
} 
.button1:active .image01 { 
    opacity: 1; 
    top:5%; 
    left:20%; 
} 

---

または短縮形プロパティを使用して：

transition: opacity 2s linear 1s; 

したがって、いくつかのプロパティーを省略すると、デフォルト値が使用されます。

続きを読むtransition