【サンプルあり】CSSテキストアニメーション で簡単な動きをつけ注目を集めよう！

<div class="text">ゆらゆらなテキスト</div>

@keyframes sway {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

.text {
    animation: sway 2s infinite ease-in-out;
}

<div class="slide-in">スライドする要素</div>

.slide-in {
  font-size: 30px;
  font-weight: bold;
  animation: slideIn 1s ease-out;
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

<p><span class="highlight_move">蛍光ペンでハイライトされたテキスト</span></p>

.highlight_move {
   background: linear-gradient(transparent 50%, #ff0 30%);
   animation: slideIn 1s ease-out;
   position: relative;
   display: inline-block;
}

@keyframes slideIn {
   0% {
      transform: translateX(-100%);
   }
   100% {
      transform: translateX(0);
   }
}

<div class="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</div>

.text {
    display: inline-block;
    overflow: hidden;
}

.text span {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    animation: slideInFromBottom 0.5s forwards;
    animation-delay: 0.1s; /* 0.1秒ずつ遅延して表示 */
}

@keyframes slideInFromBottom {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

<div class="text-bounce">Bounce</div>

.text-bounce {
    display: inline-block;
    font-size: 36px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

<div class="animated-text">Hello</div>

.animated-text {
    display: inline-block;
    font-size: 24px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    animation: invertColors 3s infinite;
}

@keyframes invertColors {
    0% {
        background-color: #333;
        color: #fff;
    }
    50% {
        background-color: #fff;
        color: #333;
    }
    100% {
        background-color: #333;
        color: #fff;
    }
}

<div class="underlined-text">Animated Text</div>

.underlined-text {
  position: relative;
  display: inline-block;
  font-size: 24px;
}

.underlined-text::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ff9;
  transform: scaleX(0);
  transform-origin: bottom left;
  animation: underlineDelay 0.5s 1 0.5s ease-in-out forwards; /* 遅延とアニメーションの設定 */
}

@keyframes underlineDelay {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

<div class="fade-in-text">Welcome to Our Website</div>

.fade-in-text {
  position: relative;
  font-size: 24px;
  opacity: 0; /* 初めは透明に設定 */
  transform: translateY(100%); /* 下からスライドするために位置を下に設定 */
  animation: fadeInFromBottom 1s forwards; /* フェードインアニメーションの設定 */
}

@keyframes fadeInFromBottom {
  to {
    opacity: 1; /* アニメーション終了時に完全に表示 */
    transform: translateY(0); /* アニメーション終了時の位置 */
  }
}