くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[CSS3]animationで背景色を変化させる

昨日の授業の復習。


CSS3のanimationで背景色を変化させる

画像はPhotoshopで用意。文字や太陽のシェイプの部分をくり抜き、
背景色が見えるようにする.
f:id:pleasure10501:20150623182422p:plain

サーバーにアップしたのはこのアドレスから見られます
http://webtre.ikidane.com/css3/

CSS

div {
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite; 
width: 300px;
height: 300px;
padding: 10px;
}
@-webkit-keyframes bg-color {
  0% {background: yellow;}
	25% {background: orange;}
	50% {background: red;}
	75% {background: orange;}
  100% {background: yellow;}
}
@-moz-keyframes bg-color {
  0% {background: yellow;}
	25% {background: orange;}
	50% {background: red;}
	75% {background: orange;}
  100% {background: yellow;}
}
@keyframes bg-color {
  0% {background: yellow;}
	25% {background: orange;}
	50% {background: red;}
	75% {background: orange;}
  100% {background: yellow;}
}


HTML

<body>
<div>
<img src="img/animation.png" alt="">
</div>
</body>