クリエイター：コーディング備忘録ブログ

コーディング

グラデーションのアニメーション

グラデーションを取り入れることで、よりサイトを魅力的に見せたりすることができます。
さらにアニメーションさせることで、視覚効果を与え、よりサイトの見栄えが良くなったりするので、
スマートフォン専用などcss3に対応したサイトで使用していきたいですね。

■アニメーションのさせ方

@keyframesとanimetion-nameでanimetionとのリンクをして、変化させたい要素を0%〜100%で指定します。

body {
  background-color: #6CB8FF;
  animation: gradation 2s infinite;
}
@keyframes gradation {
  0% { background-color: #red; }
  50% { background-color: #blue; }
  100% { background-color: #green; }
}

 

この記事を見た人は次の記事も見ています。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP