« GIFアニメでバスを動かす | Main | 我が家のキャンピングカー Family Wagon SS »

2017.08.29

CSSアニメーション事始め

天気はパッとしないし、カープは悪夢の3夜連続のサヨナラ負け。しかも最高で~すっ!の鈴木誠也が怪我で離脱。あれこれ気の晴れない日々を過ごしてます。

始めたばかりの水彩は数枚描いたところで、負のスパイラルにはまり、気分に相まって暗い絵になってしまう。
う~ん何か気分転換はと探している時に、ふとCSSの解説本が目に留まった。

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ホームページの見栄えを良くするための言語のこと。これにアニメーションの機能がついてるんです。
解説本をパラパラめくると、最近もの忘れの激しい脳ミソでも理解できそう。しかもCSSアニメーションは特別なソフトを必要とせず、ホームページの作成言語のHTMLにチョコチョッコとコマンドを入れるだけ。したがってエディターさえあればできるんですよ。

日曜日の午後、ヨメサンが出かけたので、ひとり部屋にこもりひたすら解説本を見ながら、あーでもない、こーでもないと試行錯誤しながら完成させたのが、下の簡単なアニメーション。
総製作時間約4時間。それも半分はサメと島と波の絵の製作時間。CSSについては割りと簡単にできた。オレって天才?でもまだまだ奥は深そーです。

自分の名前で遊んでみました(記事にアップするためGIFアニメに変換)
Shark_island

下はインデントが表示されてませんが、このアニメーションのソースコード。
これだけ!
<style>と</style>に囲まれた部分が実際にアニメーションを動かしているCSSの部分です。HTMLの<body>句でサメと島と波(2枚)の絵を読込んでいます。

ソースコードをコピーして拡張子をhtmlのHTMLファイルで保存。下の4枚の絵を任意のフォルダにダウンロード。さらに絵を読込んでいる部分のフォルダをダウンロードしたフォルダに書き換えれば、このCSSアニメーションが動きます。(はずです。)

************************以下ソースコード************************************
<!DOCTYPE html>
<html lang="ja">
<meta http-eqip="Content-Type" content="text/html;charset=UTF-8">
<meta http-eqip="Content-Style-Type" content="text/css">
<title>CSSアニメーション</title>
<head>
<style>
@keyframes nami1{
0%{transform:translate(0px,0px);}
25%{transform:translate(20px,0px);}
50%{transform:translate(-20px,0px);}
100%{transform:translate(0px,0px);}
}
.wave1{
animation:nami1 2s linear infinite;
position:absolute; top: 300px; left: 300px;
}
@keyframes nami2{
0%{transform:translate(0px,0px);}
25%{transform:translate(-20px,0px);}
50%{transform:translate(20px,0px);}
100%{transform:translate(0px,0px);}
}
.wave2{
animation:nami2 2s linear infinite;
position:absolute; top: 300px; left: 300px;
}
@keyframes shark{
0%{transform:translate(0px,0px);}
100%{transform:translate(-500px,0px);}
}
.same{
animation:shark 10s linear infinite;
position:absolute; top: 180px; left: 800px;
}
.island{
transition: linear infinite;
position:absolute; top: 100px; left: 320px;
}
</style>
</head>
<body bgcolor="silver"><center>
<div>
<img src="d:/wave1.png" class="wave1">
<img src="d:/island.png" class="island">
<img src="d:/same.png" class="same">
<img src="d:/wave2.png" class="wave2">
</div>
</body>
</html>
************************以上ソースコード************************************

波1の絵
「wave1.png」をダウンロード
波2の絵
「wave2.png」をダウンロード
サメの絵
「same.png」をダウンロード
島の絵
「island.png」をダウンロード


|

« GIFアニメでバスを動かす | Main | 我が家のキャンピングカー Family Wagon SS »

Comments

Post a comment



(Not displayed with comment.)




TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/62766/65722075

Listed below are links to weblogs that reference CSSアニメーション事始め:

« GIFアニメでバスを動かす | Main | 我が家のキャンピングカー Family Wagon SS »