takato（@n8takato）です！
cssで文字をキラッと光らせるアニメーションを作りたい
この記事では上記の悩みを解決します。
webサイトの構築をしていると、一定の間隔で文字をキラッと光らせて欲しいという要望を言われることがあります。
一見難しそうなアニメーションですが、cssで簡単に実装することが可能です。どのようなコードで実装できるのか、説明していきます。
この記事を書いた人
- 26歳
- 男性
- 都内制作会社に勤めるwebデザイナー
- 法人営業職→未経験でwebデザイナーに転職
当ブログでは他にもcssに関する内容の記事を作成しています。興味のある方はこちらの記事も読んでみてください。
cssに関する記事
- 「【web制作者必見】コーディングのみでキャッシュを削除する方法！」
- 「【css】幅固定の中で横幅100％に表示する簡単な方法を紹介します！」
- 「display:flex;で要素を左右反対に表示する方法を紹介！」
cssで文字をキラッと光らせる方法
cssで文字をキラッと光らせると、下記のようなアニメーションになります。
See the Pen 文字を光らせるアンイメーション by takato (@ttakkatto) on CodePen.
左から文字をキラッと光らせるアニメーションを実装することが出来ます。
コードの説明
それぞれのコードの説明をします。
HTML
<body>
<head>
<!---リセットcss--->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
</head>
<div class="name">
<p>TAKATO BLOG</p>
</div>
</body><head>内のコードはリセットcssになります。アニメーションには直接関係の無いコードなので、今は無視して大丈夫です。
アニメーションを加えたい文字を作成します。今回は「name」というクラスで作成しています。
<div class="name">
<p>TAKATO BLOG</p>
</div>HTMLはこちらで終了です。
CSS
body {
background-color:#000;
}
.name {
width:400px;
}
.name p {
font-size:50px;
text-align: left;
margin:20px 0px 20px 10px;
color: #fff;
position: relative;
font-family: arno-pro,serif;
font-weight: 400;
font-style: normal;
background-image: linear-gradient(
70deg,
rgb(211, 209, 209, 0.3) 45%,
#fff 50%,
rgb(211, 209, 209, 0.3) 55%
);
background-size: 500% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 5s infinite;
}
@keyframes shine {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}cssのコードは上記が全てです。
アニメーションの光の角度
.name p {
background-image: linear-gradient(
70deg,
);上記の部分はアニメーションの角度を編集する内容です。70degだと今のような角度ですが、仮に20degにすると下記のような角度になります。
See the Pen 文字を光らせるアンイメーション 20deg by takato (@ttakkatto) on CodePen.
文字の色
/*--アニメーション後の文字色--*/
rgb(211, 209, 209, 0.3) 45%,
/*--アニメーション中の文字色--*/
#fff 50%,
/*--アニメーション前の文字色--*/
rgb(211, 209, 209, 0.3) 55% 上記の3つのコードは、それぞれのタイミングでの文字の色を表しています。
アニメーション中の文字色などをこちらで修正することが可能です。
アニメーションの速さ
animation: shine 5s infinite;上記のコードでアニメーションの速さを設定することが可能です。5sより短い時間にするとアニメーションの速度を早めることが出来ます。
また、「infinite」を加えることで、アニメーションを無限ループさせることも出来ます。
ちなみに、「shine」というのはアニメーションの名前です。こちらは後ほど説明します。
アニメーションの動きを指定する
@keyframes shine {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}「@keyframes」とは、アニメーションの動きを指定するコードになります。
@keyframesの後ろに先ほど設定したアニメーション名を入力することで、どのアニメーションに対する動きなのかを指定することが出来ます。アニメーション名は任意です。
アニメーションの注意点
文字をキラッと光らせる実装をする際に、1つ注意することがあります。
横幅の大きさでアニメーションの速さが変わる
実は、今回のコーディングでは文字の横幅を下記のように指定しております。
.name {
width:400px;
}そのため、今回のアニメーションは横幅400pxを5秒間で繰り返す内容になっています。
もしこれを横幅1,500pxに変更した場合、アニメーションの秒数は同じ5秒間でも異なるように見えます。
See the Pen 文字を光らせるアンイメーション 横幅1,500px by takato (@ttakkatto) on CodePen.
光の速さが速くなって見えますよね。
横幅400pxを5秒間かけて光が移動するのと、横幅1,500oxを5秒間かけて光が移動するのとでは、光の速さが異なります。
そのため、アニメーションの間隔を変えずに速さを変更したい場合は、アニメーションタグの横幅を変更してください。
文字間を調整するとより綺麗に見える
また、アニメーションとは関係の無い内容ですが、文字間を調整すると文字が綺麗に見えるようになります。
文字間の調整については別の記事で紹介しています。「cssで句読点やカッコなどの約物を詰めて文字間を調整する方法！」という記事を読んでください。
複数の文字を順番に光らせる方法
下記のように、複数の文字が順番に光るアニメーションがあります。
See the Pen 複数の文字を順番に光らせるアニメーション by takato (@ttakkatto) on CodePen.
JavaScriptを使わなくても、cssのみで実装することが可能です。下記がcssのコードです。
body {
background-color:#000;
}
.name01 {
width:400px;
}
.name01 p {
font-size:30px;
text-align: left;
color: #fff;
position: relative;
font-family: arno-pro,serif;
font-weight: 400;
font-style: normal;
background-image: linear-gradient(
70deg,
rgb(211, 209, 209, 0.3) 45%,
#fff 50%,
rgb(211, 209, 209, 0.3) 55%
);
background-size: 500% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 6s infinite;
animation-delay: 1s;
}
.name02 {
width:400px;
}
.name02 p {
font-size:30px;
text-align: left;
color: #fff;
position: relative;
font-family: arno-pro,serif;
font-weight: 400;
font-style: normal;
background-image: linear-gradient(
70deg,
rgb(211, 209, 209, 0.3) 45%,
#fff 50%,
rgb(211, 209, 209, 0.3) 55%
);
background-size: 500% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 6s infinite;
animation-delay: 3s;
}
.name03 {
width:400px;
}
.name03 p {
font-size:30px;
text-align: left;
color: #fff;
position: relative;
font-family: arno-pro,serif;
font-weight: 400;
font-style: normal;
background-image: linear-gradient(
70deg,
rgb(211, 209, 209, 0.3) 45%,
#fff 50%,
rgb(211, 209, 209, 0.3) 55%
);
background-size: 500% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 6s infinite;
animation-delay: 5s;
}
@keyframes shine {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}それぞれのクラスにアニメーションの開始を遅らせるコードを記載しております。
.name01 p {
animation-delay: 1s;
}
.name02 p {
animation-delay: 3s;
}
.name03 p {
animation-delay: 5s;
}
「animation-delay」で入力した秒数分アニメーションの開始時間を遅らせることが出来ます。この1行のコードをそれぞれ追加することで、順番にアニメーションを開始する実装をすることが出来ます。
最後に
この記事では、cssで文字はキラッと光るアニメーションの実装方法を紹介しました。
アニメーションは、サイトを見る方に好感度を与えることの出来るツールです。まだアニメーションを習得していない方は、是非勉強して見てください。