Comment
Author: Admin | 2025-04-28
*/.text-wrap { color: #fff; display: flex; gap: 8px;}.text-wrap:hover .letter { animation: glitch 0.8s calc(0.03s * var(--index)) infinite; text-shadow: -1px -1px 0 deeppink, 1px 1px 0 cyan;}@keyframes glitch { 0% { transform: translate(0, 0) rotate(0deg); text-shadow: -1px -1px 0 deeppink, 1px 1px 0 cyan; } 10% { transform: translate(-1px, 1px) rotate(-1deg); } 20% { transform: translate(1px, -1px) rotate(1deg); text-shadow: 1px 2px 0 deeppink, 1px 1px 0 cyan; } 30% { transform: translate(-1px, 1px) rotate(0deg); text-shadow: -1px -1px 0 deeppink, 1px 1px 0 cyan; } 40% { transform: translate(1px, -1px) rotate(-1deg); } 50% { transform: translate(-1px, 1px) rotate(1deg); text-shadow: 1px 1px 0 deeppink, 1px 1px 0 cyan; } 60% { transform: translate(1px, -1px) rotate(0deg); } 70% { transform: translate(-1px, 1px) rotate(-1deg); text-shadow: -1px -1px 0 deeppink, 1px 1px 0 cyan; } 80% { transform: translate(1px, -1px) rotate(1deg); text-shadow: 1px 1px 0 deeppink, 1px 2px 0 cyan; } 90% { transform: translate(-1px, 1px) rotate(0deg); } 100% { transform: translate(0.5px, -0.5px) rotate(-0.5deg); text-shadow: -1px -1px 0 deeppink, 1px 1px 0 cyan; }}一つ前の実装例よりもさらに指定を細かくし、色数を増やしてグリッチ風の演出を作っています。animationプロパティの一括指定の際にinfiniteを追加しているため、ホバーしている間はアニメーションが続きます。フォントサイズを大きくする場合は、あわせてtranslateやtext-shadowで動かす値を大きくするなどバランス調整が必要です。まとめ一文字ずつ変化するアニメーションのバリエーションを紹介してきました。実現したい演出に近いアニメーションや制作中のサイトの雰囲気に合う実装例はあったでしょうか？よりよいサイト制作のヒントになれば幸いです。また、実際に本記事のコードをサイトへ適用する場合に調整したいポイントを、前回記事の以下の章で紹介しています。こちらも閲覧ください。コラム：アニメーションの緩急を調整する｜『HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選』コラム：スマホではホバー時のアニメーションをつけたくない場合は？｜『HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選』参考リンク実装例制作にあたり参考にした記事を掲載します。アクセシビリティ通信 #3 aria-hidden上記記事ではとくに、例3: 文字ごとに区切ったテキストの章を参考にしました。
Add Comment