WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

CSS3によるアニメーション　その２

HTML5+CSS3

CSS3のアニメーション機能を使って、背景色とボックスシャドウに動きを加える。

デモページ

http://yachin29.html.xdomain.jp/animation/bg-anime.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
body {
  background: #000;
}
#box-shadow {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius:5px;
  animation: shining 3s infinite;
  -webkit-animation: shining 3s infinite;
}
@-webkit-keyframes shining {
	 /*白いドロップシャドウをかける事で光って見えるようになる*/
 0% {-webkit-box-shadow: 0 0 5px #FFFFFF;}
 50% {-webkit-box-shadow: 0 0 15px #FFFFFF;}
 100% {-webkit-box-shadow: 0 0 5px #FFFFFF;}
}
@keyframes shining {
	 /*白いドロップシャドウをかける事で光って見えるようになる*/
 0% {box-shadow: 0 0 3px #FFFFFF;}
 50% {box-shadow: 0 0 10px #FFFFFF;}
 100% {box-shadow: 0 0 3px #FFFFFF;}
}
#box {
  width: 300px;
  height: 300px;
  /*上下左右自動で真ん中に*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
 /*角丸に表示する*/ 
  border-radius:5px;
/*アニメーション*/
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
 }
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

</style>
</head>

<body>
<div id="box-shadow"><div id="box"><img src="img/bg.png" alt=""></div></div>
</body>
</html>