CssAnimation -絵文字でパラパラ漫画風アニメ-

head内に貼り付けるとこんな感じです（下のcodeでは文字フォントのOswaldが入っているのでGoogleFontsからコピーしてください）

HTML

        
        <head>
          <link rel="preconnect" href="https://fonts.googleapis.com">
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
          <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Oswald:wght@200..700&display=swap" rel="stylesheet">
        </head>

CSSはこんな感じですがfont-familyをコピペするぐらいでしょうか

CSS

        
        .noto-color-emoji-regular {
          font-family: "Noto Color Emoji", sans-serif;
          font-weight: 400;
          font-style: normal;
        }

おすすめの使い方↓

CSS

        
        :root{
          --emoji-font: "Noto Color Emoji", "aplle color emoji", "Oswald", sans-serif;
        }

        font-family: var(--emoji-font);

safariで表示されなかった..？
デバイス（ブラウザ）の影響を受けにくくする為絵文字の横に️を付けます（普通は表示されません）↓

HTML

        
        <div class="background">
          <p class="actor1">🤧️&#xfe0f</p> ←こんな感じで記述
          <p class="actor2">😩️</p> ←付けても表示されない
          <p class="actor3">😨️</p>  safariだとspaceと認識される事も...
          <p class="actor4">🤒️</p>
          <p class="actor5">😷️</p>
          <p class="cold">Color Emoji</p>
        </div>

もう1つの対策は絵文字を16進数で記述するというものです

HTML

        
        <div class="background">
          <p class="actor1">&#x1F927;</p> ←絵になります
          <p class="actor2">&#x1F629;</p>（絵にならないように記述しています）
          <p class="actor3">&#x1F628;</p>
          <p class="actor4">&#x1F912;</p>
          <p class="actor5">&#x1F637;</p>
          <p class="cold">Color Emoji</p>
        </div>

サイトの本文で絵文字Animationを使う 😄️ 😅️　 ←こんな感じ

HTML

        
        サイトの本文で絵文字Animationを使う
        <span class="emoji">😄️</span> ←16進数で記述して絵になってる
        <span class="emoji_2">😅️</span>

Animation設定は

CSS

        
        .emoji,
        .emoji_2{
          position: absolute;
          font-family: var(--emoji-font);
          animation: emoji 1s infinite ease;
          -webkit-animation: emoji 1s infinite ease;
        }
        .emoji_2{
          animation-delay: .5s;
          -webkit-animation-delay: .5s;
        }

@keyframesは

CSS

        
        @keyframes emoji{
          from{ opacity: 0;}
        }
        @-webkit-keyframes emoji{
          from{ opacity: 0;}
        }

本文に絵文字HoverAnimation→😍️

HTML

        
        <p>
          本文に絵文字ホバーアニメーション→<span class="buru">😍️</span>
        </p>

Animation設定は

CSS

        
        .buru{
          font-size: 1rem;
          font-family: var(--emoji-font);
        }
        .buru:hover{
          animation: buru .2s infinite alternate;
          -webkit-animation: buru .2s infinite alternate;
        }

@keyframesは

CSS

        
        @keyframes buru{
          to{ transform: translateZ(100%); font-size: 1.2rem;}
        }
        @-webkit-keyframes buru{
          to{ transform: translateZ(100%); font-size: 1.2rem;}
        }

CssAnimation

-絵文字でパラパラ漫画風アニメ-

目次