HTMLとCSS3（その２：アニメーション)

エレメントにアニメーションを適用する。

つぎが、上のエレメントのマークアップです。

<div id=”animationEX”> <div class=”parent”> <div class=”child”> <p>DIVタグ（division）はブッロク（block）属性の代表格です。</p> </div> </div> </div> <style> #animationEX {} #animationEX .parent { position:relative; width: 400px; height:320px; /*背景のグラデーション指定*/ background: rgb(35,40,178); /* Old browsers */ background: -moz-linear-gradient(top, rgba(35,40,178,1) 0%, rgba(41,137,216,1) 60%, rgba(179,204,229,1) 61%, rgba(11,135,229,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(35,40,178,1)), color-stop(60%,rgba(41,137,216,1)), color-stop(61%,rgba(179,204,229,1)), color-stop(100%,rgba(11,135,229,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#2328b2′, endColorstr=’#0b87e5′,GradientType=0 ); /* IE6-9 */ /*パーステクティブの指定*/ -webkit-perspective: 333px; -moz-perspective: 333px; -ms-perspective: 333px; -o-perspective: 333px; -webkit-perspective-origin:50% 50%; -mos-perspective-origin:50% 50%; -ms-perspective-origin:50% 50%; -o-perspective-origin:50% 50%; } #animationEX .child { position : absolute; left : 100px; top: 100px; width: 220px; height:90px; background-color:#D89; font-size : 12pt; font-family : verdana; font-weight: bold; color : white; text-align: center; /*text-shadow: 2px 2px 7px #50b010;*/ /*拡大縮小させる指定*/ /*-webkit-animation: scale 4s linear 0s infinite alternate; -moz-animation: scale 4s linear 0s infinite alternate; -o-animation: scale 4s linear 0s infinite alternate; -ms-animation: scale 4s linear 0s infinite alternate;*/ /*回転させる指定*/ -webkit-animation: rot3d 4s linear 0s infinite normal; -moz-animation: rot3d 4s linear 0s infinite normal; -o-animation: rot3d 4s linear 0s infinite normal; -ms-animation: rot3d 4s linear 0s infinite normal; /*SHADOW*/ box-shadow: 0px 0px 20px rgba(255,161,208,0.80); -moz-box-shadow: 0px 0px 20px rgba(255,161,208,0.80); -webkit-box-shadow: 0px 0px 20px rgba(255,161,208,0.80); } #animationEX .child p { margin:10px; } /*拡大縮小のアニメーション*/ @-webkit-keyframes scale { 0% {-webkit-transform: scale(0.85);} 100% {-webkit-transform: scale(1.05);} } @-moz-keyframes scale { 0% {-moz-transform: scale(0.85);} 100% {-moz-transform: scale(1.05);} } @-o-keyframes scale { 0% {-moz-transform: scale(0.85);} 100% {-moz-transform: scale(1.05);} } @-ms-keyframes scale { 0% {-moz-transform: scale(0.85);} 100% {-moz-transform: scale(1.05);} } /*3D回転するアニメーション*/ @-webkit-keyframes rot3d { 0% { background-color: #F13F84; -webkit-transform: rotateY(0deg); } 50% {background-color: #000a6c;} 100% { background-color: #F13F84; -webkit-transform: rotateY(360deg); } } @-moz-keyframes rot3d { 0% { background-color: #F13F84; -moz-transform: rotateY(0deg); } 50% {background-color: #000a6c;} 100% { background-color: #F13F84; -moz-transform: rotateY(360deg); } } @-o-keyframes rot3d { 0% { background-color: #F13F84; -moz-transform: rotateY(0deg); } 50% {background-color: #000a6c;} 100% { background-color: #F13F84; -moz-transform: rotateY(360deg); } } @-ms-keyframes rot3d { 0% { background-color: #F13F84; -moz-transform: rotateY(0deg); } 50% {background-color: #000a6c;} 100% { background-color: #F13F84; -moz-transform: rotateY(360deg); } } </style>