カテゴリー
閉じる
カテゴリー
Top >> ウェブデザイン(HTML/CSS)

CSSアニメーション テキストデザイン例

CSSの@keyframesとanimationを使用すると、JavaScriptを使わなくても、さもざもなモーションやアニメーションを実装することができます。

ここでは、CSSアニメーションを使って、テキスト(<p>タグ)に動きのあるデザインを付加してみます。

CSSの各プロパティや値は、お好みで自由にいじってください。

フェードイン(CSSファイル記述例)

@keyframes fadeIn {

0% {
  opacity: 0;
}

20% {
  opacity: 0.2;
}

40% {
  opacity: 0.4;
}

60% {
  opacity: 0.6;
}

80% {
  opacity: 0.8;
}

100% {
  opacity: 1;
}

}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  font-size: 36px;
}
<p>タグにclass="fadeIn"を付加したアニメーションを確認する

フェードアウト(CSSファイル記述例)

@keyframes fadeOut {

0% {
  opacity: 1;
}

20% {
  opacity: 0.8;
}

40% {
  opacity: 0.6;
}

60% {
  opacity: 0.4;
}

80% {
  opacity: 0.2;
}

100% {
  opacity: 0;
}

}

.fadeOut {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  font-size: 36px;
  opacity: 0;
}
<p>タグにclass="fadeOut"を付加したアニメーションを確認する

徐々に大きく(CSSファイル記述例)

@keyframes getBigger {

0% {
  font-size: 0px;
}

20% {
  font-size: 8px;
}

40% {
  font-size: 16px;
}

60% {
  font-size: 24px;
}

80% {
  font-size: 32px;
}

100% {
  font-size: 40px;
}

}

.getBigger {
  animation-name: getBigger;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  font-size: 40px;
}
<p>タグにclass="getBigger"を付加したアニメーションを確認する

徐々に大きく+フェードイン(CSSファイル記述例)

@keyframes getBiggerWithFadeIn {

0% {
  font-size: 0px;
  opacity: 0;
}

20% {
  font-size: 8px;
  opacity: 0.2;
}

40% {
  font-size: 16px;
  opacity: 0.4;
}

60% {
  font-size: 24px;
  opacity: 0.6;
}

80% {
  font-size: 32px;
  opacity: 0.8;
}

100% {
  font-size: 40px;
  opacity: 1;
}

}

.getBiggerWithFadeIn {
  animation-name: getBiggerWithFadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  font-size: 40px;
}
<p>タグにclass="getBiggerWithFadeIn"を付加したアニメーションを確認する

徐々に小さく(CSSファイル記述例)

@keyframes getSmaller {

0% {
  font-size: 40px;
}

20% {
  font-size: 32px;
}

40% {
  font-size: 24px;
}

60% {
  font-size: 18px;
}

80% {
  font-size: 8px;
}

100% {
  font-size: 0px;
}

}

.getSmaller {
  animation-name: getSmaller;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  font-size: 0px;
}
<p>タグにclass="getSmaller"を付加したアニメーションを確認する

徐々に小さく+フェードアウト(CSSファイル記述例)

@keyframes getSmallerWithFadeOut {

0% {
  font-size: 40px;
  opacity: 1;
}

20% {
  font-size: 32px;
  opacity: 0.8;
}

40% {
  font-size: 24px;
  opacity: 0.6;
}

60% {
  font-size: 18px;
  opacity: 0.4;
}

80% {
  font-size: 8px;
  opacity: 0.2;
}

100% {
  font-size: 0px;
  opacity: 0;

}

}

.getSmallerWithFadeOut {
  animation-name: getSmallerWithFadeOut;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  font-size: 0px;
}
<p>タグにclass="getSmallerWithFadeOut"を付加したアニメーションを確認する

点滅(CSSファイル記述例)

@keyframes flash {

0% {
  color: red;
}

50% {
  color: white;
}

100% {
  color: red;
}

}

.flash {
  animation-name: flash;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  color: red;
  font-size: 36px;
}
<p>タグにclass="flash"を付加したアニメーションを確認する
オフィスペンぎん
作者:オフィスペンぎん(オフペン)
日英中翻訳者/メディアディベロッパー/ライター。ペンギンの教室の他、タブストックにてソロギター向け編曲や採譜。依頼、相談、メッセージはフォームまたはTwitterから。
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

こちらも役立つかも?

同じカテゴリーの記事(ウェブデザイン HTML/CSS)

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter