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

グラデーションを取り入れることで、よりサイトを魅力的に見せたりすることができます。
さらにアニメーションさせることで、視覚効果を与え、よりサイトの見栄えが良くなったりするので、
スマートフォン専用など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; }
}

 

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です