59310


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

[code]

    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
        }
    }
[/code]

[code]

    <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">
[/code]

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

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

## 試したこと

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

[code]

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

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

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

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

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

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


CC BY-SA 4.0
2019-09-26T08:07:35.953
59290
2019-09-27T00:27:29.227
35433
question
html css html5
アイコンをマウスホバー時に滑らかに別アイコンに、マウスアウトした際に滑らかに元アイコンに変化させたい


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

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

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

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

[code]

    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);
    }
    
[/code]

[code]

    #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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-09-27T00:27:29.227
59310
2019-09-27T00:27:29.227
32986
59290
answer