0

『スニペットを実行』を押して、動作サンプルをご確認いただけますでしょうか。

html {
    text-align: center;
}

#check, .fas.fa-check-circle {
    display: none;
}

i {
    cursor: pointer;
    font-size: 64px;
}

#check:hover+label .fa-check {
    display: none;
}

#check:hover+label .fa-check-circle {
    display: inline;
    animation: fadeIn 1.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
<input type="checkbox" id="check">
<label for="check">
  <i class="fas fa-check"></i>
  <i class="fas fa-check-circle"></i>
</label>

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

サンプルでは、
元サンプルにマウスホバーすると元アイコンが瞬時に消えて、別アイコンがフェードイン。
別アイコンからマウスを離すと瞬時に別アイコンが消えて、瞬時に元のアイコンが表示。

という状態です。

サンプルの状態を、
元アイコンにマウスホバーをすると元アイコンがフェードアウトし別アイコンがフェードイン。
別アイコンからマウスを離すと、別アイコンがフェードアウトし元アイコンがフェードイン。

のようにする方法をご教示いただけないでしょうか。

試したこと

cssのtransitionプロパティが設定できると、滑らかに変化する状態が実装できるかと思い、

i {
   cursor: pointer;
   font-size: 64px;
   transition: all .5s
}

と書いてみましたが、効きませんでした。

また、iタグにフェードインアニメーションを設定することでマウスアウト時の元アイコン表示もフェードインになり、最初に提示したサンプルよりは滑らかなアニメーションにはなりましたが、ページの読み込み時もフェードインになるため、よい解決策とは言えないものでした。

「滑らかに変化」につきまして

フェードしない方法で滑らかに変化できる方法があれば、加えてご教示いただけないでしょうか。
滑らかに変化させる方法がフェードさせることしか思い浮かばなかったため、フェードを設定しましたが、理想はフェードせず滑らかに変化させたいです。

「フェードしない滑らかな変化」につきましては具体的なイメージはないので、ご回答いただけます方の定義での「フェードしない滑らかな変化」をご教示いただきたく存じます。

1

1 件の回答 1

2

元アイコンにマウスホバーをすると元アイコンがフェードアウトし別アイコンがフェードイン。
別アイコンからマウスを離すと、別アイコンがフェードアウトし元アイコンがフェードイン。
のようにする方法をご教示いただけないでしょうか。

display プロパティは animatable ではないため、アニメーションで扱う場合には手間がかかります。今回のように、同じ位置に 2 つのアイコンが配置される場合は、 display プロパティを visibility プロパティで代用することが可能であることが多いため、ここでは visibility プロパティを使用します。

ただし、 visibility プロパティは、要素によって生成されたボックスを不可視にした上で、レイアウトに影響を与えることに注意する必要があります。この特性から、今回は position プロパティによって 2 つの要素を重ねることで、 display プロパティでボックスが削除されたときのような動作を実現します。

上記 2 つに従って、各要素にスタイルを適用し、 transition プロパティを適用すれば、「ホバーをすると元アイコンがフェードアウトし別アイコンがフェードイン、マウスを離すと別アイコンがフェードアウトし元アイコンがフェードイン」という動作になります。

i {
  --check-circle-dur: 1.5s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 64px;
  cursor: pointer;
}

.fa-check, #check:hover+label .fa-check-circle {
  visibility: visible;
  opacity: 1;
  transition: var(--check-circle-dur) var(--check-circle-dur);
}

.fa-check-circle, #check:hover+label .fa-check {
  visibility: hidden;
  opacity: 0;
  transition: var(--check-circle-dur);
}

#check {
  display: none;
}

i {
  --check-circle-dur: 1.5s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 64px;
  cursor: pointer;
}

.fa-check, #check:hover+label .fa-check-circle {
  visibility: visible;
  opacity: 1;
  transition: var(--check-circle-dur) var(--check-circle-dur);
}

.fa-check-circle, #check:hover+label .fa-check {
  visibility: hidden;
  opacity: 0;
  transition: var(--check-circle-dur) 0s;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<input type="checkbox" id="check">
<label for="check">
  <i class="fas fa-check"></i>
  <i class="fas fa-check-circle"></i>
</label>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。