記事に戻る（Back to Article）

【CSS】@keyframesを使用してテキストへRGBに分けた色ズレを発動させるグリッチエフェクトを実装する方法のデモページ

※デベロッパーツール等でソースコードをご確認ください（Please check using Developer tools）

このページの内容が難しいと感じた方はこちら

DUMMEY TEXT

スポンサーリンク

Web制作会社LIGが運営するWebデザインスクール

CSS

body {
    background: #000;
  }

  .block {
    margin: 70px auto 0;
  }

  .block p {
    position: relative;
    font-size: 100px;
    text-align: center;
    color: #fff;
  }

  .block.active p span {
      backface-visibility: hidden;
      animation: anime 1.1s 0.5s;
  }

  @keyframes anime {
    0% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    1% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    2% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    3% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    4% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    5% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    6% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    7% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    8% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    9% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    10% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    11% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    12% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    13% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    14% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0)
    }
    15% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0)
    }
    16% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    17% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    18% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    19% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    20% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    21% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    22% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    23% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    24% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    25% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    26% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    27% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    28% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    29% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    30% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    31% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    32% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    33% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    34% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    35% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    36% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    37% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    38% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    39% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    40% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    41% {
      text-shadow: 45px 0 0 #1fffff, -45px 0 0 #ff1fff;
      filter: blur(0)
    }
    42% {
      text-shadow: 0 0 0 #1fffff, 0 0 0 #ff1fff;
      filter: blur(0)
    }
    43% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0)
    }
    44% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0)
    }
    45% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0)
    }
    46% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    47% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    48% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    49% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    50% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    51% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    52% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    53% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    54% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    55% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0.5px)
    }
    56% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0.5px)
    }
    57% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0.5px)
    }
    58% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    59% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    60% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    61% {
      text-shadow: 30px 0 0 #ffff1a, -30px 0 0 #ff1fff;
      filter: blur(0)
    }
    62% {
      text-shadow: 0 0 0 #ffff1a, 0 0 0 #ff1fff;
      filter: blur(0)
    }
    63% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #1fffff;
      filter: blur(0)
    }
    64% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #1fffff;
      filter: blur(0)
    }
    65% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #1fffff;
      filter: blur(0)
    }
    66% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #1fffff;
      filter: blur(0.5px)
    }
    67% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0.5px)
    }
    68% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    69% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    70% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    71% {
      text-shadow: 50px 0 0 #ffff1a, -50px 0 0 #1fffff;
      filter: blur(0)
    }
    72% {
      text-shadow: 0 0 0 #ffff1a, 0 0 0 #1fffff;
      filter: blur(0)
    }
    73% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    74% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    75% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    76% {
      text-shadow: 2.8px 0 0 #ffff1a, -2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    77% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    78% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    79% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    80% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #1fffff;
      filter: blur(0)
    }
    81% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0)
    }
    82% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0)
    }
    83% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    84% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    85% {
      text-shadow: 1px 0 0 #ffff1a, -1px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    86% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    87% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0.5px)
    }
    88% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    89% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    90% {
      text-shadow: -2.8px 0 0 #ffff1a, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    91% {
      text-shadow: 55px 0 0 #ff1fff, -55px 0 0 #1fffff;
      filter: blur(0)
    }
    92% {
      text-shadow: 0 0 0 #ff1fff, 0 0 0 #1fffff;
      filter: blur(0)
    }
    92% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    93% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    94% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    95% {
      text-shadow: 0.8px 0 0 #1fffff, -0.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    96% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    97% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    98% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    99% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
    100% {
      text-shadow: -2.8px 0 0 #1fffff, 2.8px 0 0 #ff1fff;
      filter: blur(0)
    }
  }

  @media screen and (max-width:640px){
    .block p {
      font-size: 366px;
    }
  }

JavaScript

$(window).on('load', function(){
  $(".block").addClass("active");
});