アニメーションCSS3:ディスプレイ+不透明度


100

CSS3アニメーションに問題があります。

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

このコードは、の変更を削除した場合にのみ機能しdisplayます。

ホバー直後の表示を変更したいのですが、トランジションを使用して不透明度を変更する必要があります。


2
他の人が示唆したようにCSSが動作しない場合は、ここにあるフェージングのための非常に簡単なJavaScriptコードが。
Abhranil Das

回答:


116

マイケルズの回答に基づいて、これは使用する実際のCSSコードです

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

1
すべてのブラウザをサポートします。
david_adler 2013年

CSS3はすべてのブラウザでサポートされていません。拡張したい場合は、正しい接頭辞を追加してください
Chris

17
ホバリングするときはどうですか、fadeOutToNoneを実装する方法は?
Green

4
あなたがパーセントの画分を使用することができるとして、それは長いアニメーションの継続時間で明らかになることができ、「開始」に遅延を最小限に抑えるために、それはむしろ、1%0.001%のような何かを使用することをお勧め勧めします
ザックSaucier

1
アニメーションをサポートする最初のOperaバージョンはすでにwebkitに基づいているため、-o-keyframesディレクティブは実際には役に立ちません。
リコオセペク2018

43

CSSアニメーションでできること:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

良いアイデアです。アニメーションフィルモードでホバー中に要素を表示し続けることに成功しましたが、マウスアウトすると、要素が消えます。
Alexis Delrieu

2
fill-mode:forwardsを使用して、アニメーションの終了後に変更を永続化できます。
Michael Mullany

40

可能であれば-のvisibility代わりに使用display

例えば:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

23
可視性プロパティの問題は、これによって要素が非表示にならず、要素が非表示になるだけです。したがって、それでもスペースを占有します。
サミュエル

6
非表示だけでなく、イベント(クリックなど)に対して透過的です。表示を変更しないことは、ドキュメントをリフローしないことを意味します。これは良いことです。不透明度を介してフェードイン/フェードアウトする必要のあるほとんどの要素は、とにかく固定または絶対位置を持つ必要があります。
Rasmus Kaj 2017年

12

この回避策は機能します。

  1. 「キーフレーム」を定義します。

    @-webkit-keyframes fadeIn { 
      0% { opacity: 0; }
      20% { opacity: 0; }
      40% { opacity: 0.3; }
      60% { opacity: 0.5; }
      80% { opacity: 0.9; }
      100% { opacity: 1; }
    }
    
    @keyframes fadeIn {
      0% { opacity: 0; }
      20% { opacity: 0; }
      40% { opacity: 0.3; }
      60% { opacity: 0.5; }
      80% { opacity: 0.9; }
      100% { opacity: 1; }
    }
    
  2. 「ホバー」でこの「キーフレーム」を使用します。

    div a span { 
      display: none;
    }
    
    div a:hover span {
      display: block;
    
      -webkit-animation-name: fadeIn;
      -webkit-animation-duration: 1s;
      animation-name: fadeIn;
      animation-duration: 1s;
    }
    

9

私はこれを使ってそれを達成しました。彼らはホバーでフェードしますが、隠されているときはスペースを取りません。

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

6

少し変更しましたが綺麗な仕上がりです。

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

皆様ありがとうございました。


4
これはスクリーンリーダーではうまく機能しません。コンテンツは読み続けます。
ehdv 2013

1
visibility: hidden;.child / visibility:visible;ホバーに追加すると、スクリーンリーダーの問題が修正されます
csilk

6

ポインターイベントを使用してこれを行うには、別の良い方法があります。

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

残念ながら、これはIE10以前ではサポートされていません。


4

私も同じ問題を抱えていました。@MichaelMullanyと@Chrisが示唆するように、トランジションの代わりにアニメーションを使用してみましたが、 "-moz"と "-o"プレフィックスをコピーして貼り付けた場合でも、Webkitブラウザーでしか機能しませんでした。

visibility代わりに使用することで問題を回避することができましたdisplay。私の子要素がposition: absoluteであるため、これは私にとっては機能します。したがって、ドキュメントフローは影響を受けません。他の人にもうまくいくかもしれません。

これは私の解決策を使用して元のコードがどのように見えるかです:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

アニメーションがビューの外にあるときに子にカーソルを合わせると、要素が非表示になるだけなので、子がスナップインします。マウスをその場所で動かしていると、かなり煩わしくなります。
adamj 2015年

4

JSで変更をトリガーしている場合、たとえばクリックすると、良い回避策があります。

display:none要素ではアニメーションが無視されるため、問題が発生するのがわかりますが、ブラウザーはすべての変更を一度に適用し、同時にアニメーション化されていない間は要素がdisplay:blockになることはありません。

秘訣は、可視性を変更した後、アニメーションをトリガーする前にフレームをレンダリングするようブラウザに要求することです。

ここにjQueryの例があります:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

2
この質問にはJavaScriptまたはjQueryのタグが付けられていません
j08691

私はそれが起こっている理由を説明するためにそれを書きました。これについて知ったとき、それは私にとって非常に役に立ちました。それが他の人にも役立つことを願っています。
daniel.sedlacek 2017年

1
ところで、不透明度の値は0から1の間です
Amr

2

絶対要素または固定要素では、z-indexを使用することもできます。

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

他の要素は-100と100の間のz-indexを持つはずです。


残念ながら、それはtype=passwordフィールドのKeePassパスワードインジケータシンボルを台無しにします。見えない。
philk '19年

1
任意のZインデックス番号の使用を停止できますか?ここで:z-index:1; vs z-index:-1で十分です。巨大なZインデックス番号を選択すると、管理が困難になります。
dudewad 2015年

2

私が知っている、これはあなたの質問の解決策ではありません

ディスプレイ+不透明度

私のアプローチはより一般的な質問を解決しますが、おそらくこれをdisplayと組み合わせて使用することで解決する必要がある背景の問題でしたopacity

要素が見えないときに邪魔にならないようにしたかったのです。このソリューションはまさにそれを実行します:要素を離れた場所に移動し、これを遷移に使用できます:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

このコードには、ブラウザのプレフィックスや下位互換性のハックは含まれていません。エレメントは不要になったため、エレメントをどのように移動するかという概念を示しているだけです。

興味深い部分は、2つの異なる遷移定義です。マウスポインターが.parent要素をホバーしているとき、要素を.childすぐに配置する必要があり、不透明度が変更されます。

transition: left 0s, visibility 0s, opacity 0.8s;

ホバーがない場合、またはマウスポインターが要素の外に移動された場合、不透明度の変更が完了するまで待ってから、要素を画面の外に移動できます。

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

オブジェクトを遠ざけることは、設定display:noneがレイアウトを壊さない場合に実行可能な代替手段になります。

答えはしなかったのですが、この質問の頭に釘を打ってください。


そのMicrosoftフィルターはIE9以降廃止されました。2016年に回答に追加したい特別な理由はありますか?
TylerH 2016年

@TylerHどれだけのユーザーがリーチできるかは、好みの問題です。
Hannes Morgenstern 2016年

それが非推奨であり、IE <11がもはやMicrosoftでサポートされていないことを考えると、そのプロパティを使用することは、せいぜい疑わしい味です。
TylerH 2016年

@TylerH新しいブラウザにアップグレードしない、またはアップグレードできないクライアントに対応する必要があるのは一般的です。私は、IE6をまだ使用していて、「理由」によるアップグレードを拒否するクライアントとして有名な銀行を持っています。
マーカスカニンガム

@MarcusCunningham質問にはcss3がタグ付けされているため、IE6(およびIE7とIE8)の使用は完全に禁止されています。可能な限り早期にブラウザOPがコードを記述できた可能性があるため、この回答のMSフィルターは廃止されました。また、将来の読者にとっては、サポートさえされていないため、さらに役に立たなくなります。この質問の回答にそれを含めることについて議論はありません。しかし、ハンネスは彼の回答からすでにそれを削除しているので、それは議論の余地があります。
TylerH 2016年

1

私がしたことの1つは、初期状態のマージンを "margin-left:-9999px"のように設定して画面に表示されないようにし、ホバー状態で "margin-left:0"をリセットすることでした。その場合は、「display:block」にしてください。私のためにトリックをしました:)

編集:状態を保存し、以前のホバー状態に戻らない?ここでJSが必要です:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

いい考えですが、
マウスアウトする

アレクシス、それはあなたがしたいことではないですか?ホバーとは、マウスでホバーした場合のみを意味します。達成しようとしていることを明確にしてください。
Joshua

うん、ごめん。マウスアウトでフェードを保存したい。
Alexis Delrieu

それはすべてを変えます。ほとんど。基本的に必要なのは、他のユーザーが示したホバー状態を検出して追加するJS関数です。
Joshua

1

onHoverIn / Outの両方の方法でアニメーションを作成するために、私はこのソリューションを実行しました。それが誰かに役立つことを願っています

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}

1

CSSで不透明度をアニメーション化する方法:
これは私のコードです:
CSSコード

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}
<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

またはこのデモファイルを確認してください

function vote(){
var vote = getElementById( "yourOpinion")
if(this.workWithYou):
vote + = 1};


displayプロパティは単に削除されたため、質問には答えません。
トースト

-4

display:移行できません。おそらく、やりたいことを行うにはjQueryを使用する必要があります。


3
どこでもjQueryを提唱するのをやめなければなりません。
Benjamin Gruenbaum

1
@BenjaminGruenbaum jQueryは素晴らしい人です。それは素晴らしく、すべてのことを行います。
マダラのゴースト
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.