CSS3でアニメーションが作れると聞いたので、お試しに。よくある点滅のアニメーションサンプルです。
CSS3を使ったアニメーションサンプル
now loading...
HTMLコード
<div id="loading"> <span id="load01">now loading</span> <span id="load02">.</span> <span id="load03">.</span> <span id="load04">.</span> </div>
“now loading”と”.”をそれぞれspanタグで囲っています。divタグでもfloatを使えば改行されないんですが、どっちがいいのか・・・
cssコード
#loading { margin-left: 42%; margin-top: 300px; font-size: 40px; } #load01{ color:skyblue; -moz-animation-name: cssanimesample; -moz-animation-duration: 1.6s; -moz-animation-timing-function: ease; -moz-animation-delay: 0s; -moz-animation-iteration-count: infinite; -webkit-animation-name:cssanimesample; -webkit-animation-duration:1.6s; -webkit-animation-timing-function:ease; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; } #load02{ color:transparent; -moz-animation-name: cssanimesample; -moz-animation-duration: 1.6s; -moz-animation-timing-function: ease; -moz-animation-delay: 0s; -moz-animation-iteration-count: infinite; -webkit-animation-name:cssanimesample; -webkit-animation-duration:1.6s; -webkit-animation-timing-function:ease; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; } #load03{ color:transparent; -moz-animation-name: cssanimesample; -moz-animation-duration: 1.6s; -moz-animation-timing-function: ease; -moz-animation-delay: 0.2s; -moz-animation-iteration-count: infinite; -webkit-animation-name:cssanimesample; -webkit-animation-duration:1.6s; -webkit-animation-timing-function:ease; -webkit-animation-delay:0.2s; -webkit-animation-iteration-count:infinite; } #load04{ color:transparent; -moz-animation-name: cssanimesample; -moz-animation-duration: 1.6s; -moz-animation-timing-function: ease; -moz-animation-delay: 0.4s; -moz-animation-iteration-count: infinite; -webkit-animation-name:cssanimesample; -webkit-animation-duration:1.6s; -webkit-animation-timing-function:ease; -webkit-animation-delay:0.4s; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes cssanimesample { 0%{ color: skyblue; } 50%{ color: transparent; } 100%{ color: skyblue; } }