takato（@n8takato）です！
cssで文字をキラッと光らせるアニメーションを作りたい
この記事は上記の悩みに向けて作成しています。
一定の間隔で文字をキラッと光らせるアニメーションがあります。
一見難しそうなアニメーションですがcssで簡単に実装することが可能です。
この記事ではcssで文字が光るアニメーションを実装する方法を説明します。
この記事を読むメリット
- cssで文字がキラッと光るアニメーションの実装方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナーとして勤務
- webデザイナー歴2年目のひよっこ
- web制作現場で学んだことを発信している人
cssに関する他の記事はこちら
cssで文字をキラッと光らせる方法
まずは完成系を紹介します。下記のようなアニメーションを目指します。
See the Pen 文字を光らせるアンイメーション by takato (@ttakkatto) on CodePen.
文字がキラッと光るアニメーションが実装出来ます。
今回使用する言語は下記の2つです。
使用する言語
- HTML
- CSS
HTML
HTMLのコードは下記の通りです。
<head>
<!---リセットcss--->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
</head>
<body>
<div class="name">
<p>TAKATO BLOG</p>
</div>
</body><head>内のコードはリセットcssになります。
アニメーションには直接関係の無いコードなので今回は無視して大丈夫です。
アニメーションを加える文字にクラスを追加します。
<div class="name">
<p>TAKATO BLOG</p>
</div>HTMLはこちらで終了です。
CSS
続いて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の後ろに先ほど設定したアニメーション名を入力することでどのアニメーションに対する動きなのかを指定することが出来ます。アニメーション名は任意です。
先ほどの「shine」が今回任意で作成したアンメーション名です。
以上のコードで文字をキラッと光らせることが出来ます。
アニメーションの注意点
このアニメーションでは1つ注意点があります。
このアニメーションの注意点
- 横幅の大きさでアニメーションの速さが変わる
横幅の大きさでアニメーションの速さが変わる
今回のコーディングでは文字の横幅を下記のように指定しております。
.name {
width:400px;
}今回のアニメーションは横幅400pxを5秒間で繰り返す内容になっています。
横幅1,500pxに変更した場合、同じ5秒間でもアニメーションの見え方が異なります。
See the Pen 文字を光らせるアンイメーション 横幅1,500px by takato (@ttakkatto) on CodePen.
光が速く見えますよね。理屈は下記の通りです。
横幅400pxを5秒間かけて光が移動するのと横幅1,500oxを5秒間かけて光が移動するのとでは、光の移動の速さが異なりますよね。なので横幅が大きいほど光が早く移動するのです。
横幅のピクセル数を変更することで光の速さを変えることが出来ます。
複数の文字を順番に光らせる方法
下記のように複数の文字が順番に光るアニメーションがあります。
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で文字を光らせるのは簡単！
この記事ではcssで文字はキラッと光るアニメーションの実装方法を紹介しました。
cssで文字を光らせるのは簡単です。
実装する機会のある方は参考にしてみてください。