web-dev-qa-db-ja.com

CSS要素をフェードインしてからフェードアウトさせる方法は？

次のcssでクラスを.elementToFadeInAndOutに変更することで、不透明度がゼロの要素をフェードインできます。

.elementToFadeInAndOut {
    opacity: 1;
    transition: opacity 2s linear;
}

この同じクラスのcssを編集して、要素がフェードインした後にフェードアウトさせる方法はありますか？

ご清聴ありがとうございました。

css3css-transitionsfadeinfadeout
36
user95227

Cssを使用 @ keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}


@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

こちらがデモです

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>

読み取り： CSSアニメーションの使用

これを行うことでコードをきれいにすることができます：

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
83
Gildas.Tambo

明示的なユーザーアクション（mouseover/mouseoutなど）なしで単一のfadeIn/Outが必要な場合は、CSS3 animationを使用できます。 http://codepen.io/anon/pen/bdEpwW =

.elementToFadeInAndOut {
    -webkit-animation: fadeinout 4s linear 1 forwards;
    animation: fadeinout 4s linear 1 forwards;
}

@-webkit-keyframes fadeinout {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeinout {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

animation-fill-mode: forwardsを設定すると、アニメーションは最後のキーフレームを保持します

animation-iteration-count: 1を設定すると、アニメーションは1回だけ実行されます（エフェクトを複数回繰り返す必要がある場合は、この値を変更します）

11
fcalderan

このリンクが役立つことがわかりました： css-tricks fade-in fade-out css 。

Csstricksの投稿の概要は次のとおりです。

CSSクラス：

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

Reactで：

toggle(){
    if(true condition){
        this.setState({toggleClass: "m-fadeIn"});
    }else{
        this.setState({toggleClass: "m-fadeOut"});
    }
}

render(){
    return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
3
raksheetbhat