Home
CSS
【CSSのみ】背景のグラデーションを変化させるアニメーション

【CSSのみ】背景のグラデーションを変化させるアニメーション

【CSSのみ】背景のグラデーションを変化させるアニメーション

どうも!かけちまるです!

背景グラデーションの色が徐々に変化するアニメーションを実装します。

CSSのみで実装できます。
次のようなアニメーションができます。

See the Pen Untitled by kakechimaru (@kakechimaru) on CodePen.

この記事では、

  • ・背景グラデーションの色をアニメーションさせる方法

がわかります。

背景グラデーションの色をアニメーションさせる方法

HTMLはボックスを作るために空のdevタグを用意します。

HTML
コピー
<div class="bg"></div>

CSSは、
まず、.box要素にwidthheigthをあて、linear-gradientで背景をグラデーションにします。
次に、background-size.box要素の背景を大きめに指定します。
最後に、keyframebackground-positionを変化させます。

こうすると背景グラデーションの色が変化するように見えるわけです。

CSS
コピー
.bg{ background: linear-gradient(135deg, red, orange); background: -webkit-linear-gradient(-45deg, red, orange); background: -moz-linear-gradient(-45deg, red, orange); width: 300px; height: 300px; background-size: 150% 150%; animation-name: gradation; animation-duration: 5.0s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @keyframes gradation{ 0%{ background-position: 0% 0%; } 100%{ background-position: 100% 100%; } }

アニメーションの原理

図に表すと次のような感じで動いています。

アニメーションの原理

background-sizeで背景を要素より大きく設定し、background-positionで時間と共に位置を変えることでグラデーションが変化して見えるようになるわけです。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

画像のみにAccess-Control-Allow-Originを設定する方法

画像のみにAccess-Control-Allow-Originを設定する方法

記事の目次にカレント表示機能を導入する😤

記事の目次にカレント表示機能を導入する😤

clamp関数がSafariで効かない時の対処法

clamp関数がSafariで効かない時の対処法

Ajaxを使用したheaderとfooterの共通化【JavaScript】

Ajaxを使用したheaderとfooterの共通化【JavaScript】

【WordPress】カテゴリーの記事数を取得する方法

【WordPress】カテゴリーの記事数を取得する方法