4月の終わりが徐々に近づいてきてますが…

桜が完全に緑色の葉っぱが出てきましたね♪

気温も徐々に上がってきているこのころですが…

夏がまだまだ遠く感じるのはワシでしょうか？

話変わりますが…

CSSでアニメーション作成

もうCSS3の時代になり、いろんなブラウザが対応する時代になってきてます。

ただ、「IE」を使う人もいますが…

完全にサポート終了しているので、あまり推奨されません。

ただ、互換性を使わないことを祈るばかりです…

さてと、CSS3の時代になってるので、いろんな技法をネットで調べながら勉強をしています。

例えば、html4時代では「<blink>」を使ったり…

javascriptを使って「文字の点滅」を使ったりしていました。

しかし、CSS3の時代になり、いろんなブラウザも対応する時代になってきたので、javascriptを用いず、CSS3だけコーディングする技法も普及しています。

CSS3を使って文字のフェードイン・アウトの方法

<p>テキストがふわっと表示</p>

p {
	animation-name: fadeInAnime;
	animation-fill-mode:backwards;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-timing-function:ease;
	animation-delay: 0.5s;
	animation-direction:normal;
}

/*1で解説*/
@keyframes fadeInAnime{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

参考サイト
・animation

javascriptを使わないで、CSS3を使ってデザインする方法があることを頭に入れておいてくださいね。

では、また！