<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <

(1)

1331 Clipping の効果

clip プロパティをアニメーションに利用してみましょう。

●１つの画像を４分割して別々に動かす。

１つの画像を４分割して、それぞれの画像が違う動きをするアニメーションを作ります。

４分割した左上の画像は透明に近づけます。右上の画像は３Ｄ変形しながら移動します。

左下の画像は回転しながら移動します。右下の画像は拡大しながら移動します。

【ClipAnime1 の説明】

〔HTML の記述（ClipAnime1.html）

〕

画像 images/DSC00203L.jpg から４つの部分を抜き出すので、

<img>タグで４つ指定します。

サンプルＣＳＳ１

(2)

〔CSS の記述（ClipAnime1.css）

〕

#stage ステージのスタイルを指定します。width: 600px; height: 500px;、背景にグレー

（#999999）を指定します。

画像の位置の起点を指定します。

４つの画像の共通のスタイルを指定します。

#stage { width: 600px; height: 500px; background-color: #999999; border: solid 1px #000000; position: relative; } <!DOCTYPE html> <html> <head> <title>ClipAnime1</title> <meta charset="UTF-8">

<body>

<p>■画像を部分抜き出し（Clip）して動かす。（１）</p> <div id="stage">

<img src="images/DSC00203L.jpg" alt="green road"> <img src="images/DSC00203L.jpg" alt="green road"> <img src="images/DSC00203L.jpg" alt="green road"> <img src="images/DSC00203L.jpg" alt="green road"> </div> </div> </body> </html> #image1 { top: 80px; left: 30px; position: absolute; } #image1 img { top: 0px; left: 0px; width: 280px; height: 210px; }

(3)

１つ目の画像は clip プロパティで clip: rect(0px, 140px, 105px, 0px);と指定して、top

0px、right 140px、bottom 105px、left 0px の範囲の四角形を抜き出します。position:

absolute;の指定が必要です。アニメーション名を clip1Anime、実行時間を 4s、イージン

グを linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は alternate で指定しま

す。

２つ目の画像は clip プロパティで clip: rect(0px, 280px, 105px, 140px);と指定して、

top 0px、right 280px、bottom 105px、left 140px の範囲の四角形を抜き出します。position:

absolute;の指定が必要です。抜き出した画像を変形させるので、transform-origin: 210px

52px;と指定（元の画像の左上端からの距離で指定します）して、変形の起点を抜き出した

四角形の中心にします。transform-origin の指定をしなければ、変形の起点は、元の画像

の中心になっています。

0px

140px

280px

0px （１つ目の抜き出し画像）

（２つ目の抜き出し画像）

・大枠は元の画像を表します。

・１つ目の抜き出し画像は、変形

　させないので、変形の起点は

　変えません。

105px

・２つ目と３つ目の抜き出し画像

（３つ目の抜き出し画像）

（４つ目の抜き出し画像）

　は変形させるので、変形の

　起点をそれぞれの四角形の

　中心に指定します。

・４つ目の抜き出し画像は、拡大

　しながら斜め下に移動させる

210px

　ので、変形の起点はそのまま

　四角形の左上端にします。

（210px 52px）

（70px 157px）

（140px 105px）

アニメーション名を clip2Anime、実行時間を 4s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は alternate で指定します。

#image1 img:nth-child(1) {

clip:rect(0px, 140px, 105px, 0px); position: absolute; animation: clip1Anime 4s linear 0s infinite alternate;

-webkit-animation: clip1Anime 4s linear 0s infinite alternate; }

clip:rect(0px, 280px, 105px, 140px); position: absolute; transform-origin: 210px 52px;

-webkit-transform-origin: 210px 52px;

animation: clip2Anime 4s linear 0s infinite alternate;

(4)

３つ目の画像は clip プロパティで clip: rect(105px, 140px, 210px, 0px);と指定して、

top 105px、right 140px、bottom 210px、left 0px の範囲の四角形を抜き出します。position:

absolute;の指定が必要です。抜き出した画像を変形させるので、transform-origin: 70px

157px;と指定して、変形の起点を抜き出した四角形の中心にします。アニメーション名を

clip3Anime、

実行時間を 4s、イージングを linear、

開始待ち時間を 0s、

繰り返しを infinite、

実行方向は alternate で指定します。

４つ目の画像は clip プロパティで clip: rect(105px, 280px, 210px, 140px);と指定して、

top 105px、right 280px、bottom 210px、left 140px の範囲の四角形を抜き出します。

position: absolute;の指定が必要です。抜き出した画像は拡大して右斜め下に移動させる

ので、分かり易く、変形の起点は変更しません。アニメーション名を clip4Anime、実行時

間を 4s、イージングを linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は

alternate で指定します。

アニメーション名 clip1Anime に対応するタイムライン（@keyframes）を指定します。20%

後（0.8 秒後）から opacity: 1.0;を opacity: 0.3;に変化させ、画像を透明に近づけます。

@keyframes clip1Anime { from { } 20% { opacity: 1.0; } to { opacity: 0.3; } } @-webkit-keyframes clip1Anime { from { } 20% { opacity: 1.0; } to { opacity: 0.3; } } #image1 img:nth-child(3) {

clip:rect(105px, 140px, 210px, 0px); position: absolute; transform-origin: 70px 157px;

-webkit-transform-origin: 70px 157px;

animation: clip3Anime 4s linear 0s infinite alternate;

clip:rect(105px, 280px, 210px, 140px); position: absolute; animation: clip4Anime 4s linear 0s infinite alternate;

(5)

アニメーション名 clip2Anime に対応するタイムライン（@keyframes）を指定します。20%

後（0.8 秒後）から transform: translate(0px, 0px)を transform: translate(180px, 0px)

に変更し、X 方向へ 180px 移動させ、skew(0deg, 0deg)を skew(-50deg, -30deg)に変更し、

X 方向に-50 度、Y 方向に-30 度傾斜させて変形します。

アニメーション名 clip3Anime に対応するタイムライン（@keyframes）を指定します。20%

後（0.8 秒後）から transform: translate(0px, 0px)を translate(0px, 160px)に変更し、

Y 方向へ 160px 移動させ、rotateZ(0deg)を rotateZ(720deg)に変更し、時計回りに 720 度

回転（２回転）させます。

アニメーション名 clip3Anime に対応するタイムライン（@keyframes）を指定します。20%

後（0.8 秒後）から transform: translate(0px, 0px)を translate(0px, 160px)に変更し、

Y 方向へ 160px 移動させ、rotateZ(0deg)を rotateZ(720deg)に変更し、時計回りに 720 度

回転（２回転）させます。

@keyframes clip2Anime { from { }

20% { transform: translate(0px, 0px) skew(0deg, 0deg); } to { transform: translate(180px, 0px) skew(-50deg, -30deg); } }

@-webkit-keyframes clip2Anime { from { }

20% { -webkit-transform: translate(0px, 0px) skew(0deg, 0deg); } to { -webkit-transform: translate(180px, 0px) skew(-50deg, -30deg); } }

20% { transform: translate(0px, 0px) rotateZ(0deg); } to { transform: translate(0px, 160px) rotateZ(720deg); } }

20% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); } to { -webkit-transform: translate(0px, 160px) rotateZ(720deg); } }

20% { transform: translate(0px, 0px) rotateZ(0deg); } to { transform: translate(0px, 160px) rotateZ(720deg); } }

(6)

アニメーション名 clip4Anime に対応するタイムライン（@keyframes）を指定します。20%

後（0.8 秒後）から transform: translate(0px, 0px)を translate(120px, 50px)に変更し、

X 方向へ 120px、Y 方向へ 50px 移動させ、scale(1.0, 1.0)を scale(2.0, 2.0)に変更し、

縦横２倍に拡大させます。

●画像を抜き出す窓を移動させる。

画像を抜き出す窓を移動させるアニメーションを作ります。

20% { transform: translate(0px, 0px) scale(1.0, 1.0); } to { transform: translate(120px, 50px) scale(2.0, 2.0); } }

20% { -webkit-transform: translate(0px, 0px) scale(1.0, 1.0); } to { -webkit-transform: translate(120px, 50px) scale(2.0, 2.0); } }

サンプルＣＳＳ２

20% { -webkit-transform: translate(0px, 0px) rotateZ(0deg); } to { -webkit-transform: translate(0px, 160px) rotateZ(720deg); } }

(7)

【ClipAnime2 の説明】

〔HTML の記述（ClipAnime2.html）

〕

id 属性 blackWall の div 要素の中に、画像 images/DSC00027L.jpg を指定します。

〔CSS の記述（ClipAnime2.css）

〕

#stage ステージのスタイルを指定します。width: 460px; height: 360px;、背景にグレー

（#999999）を指定します。

黒い背景の中で画像を抜き出した窓が移動するように見せたいので、黒い四角形を指定し

ます。

#stage { width: 460px; height: 360px; background-color: #999999; border: solid 1px #000000; position: relative; } <!DOCTYPE html> <html> <head> <title>ClipAnime2</title> <meta charset="UTF-8">

<body>

<p>■画像を抜き出す窓（Clip）を移動させる。（２）</p> <div id="stage">

<img id="image1" src="images/DSC00027L.jpg" alt="wall paint"> </div> </div> </body> </html> #blackWall { top: 30px; left: 30px; width: 400px; height: 300px; background-color: black; position: absolute; }

(8)

#image1 画像を指定します。width: 400px; height: 300px;で指定します。clip プロパテ

ィで clip: rect(0px, 100px, 100px, 0px);と指定して、top 0px、

right 100px、

bottom 100px、

left 0px の範囲の四角形を抜き出します。position: absolute;の指定が必要です。アニメ

ーション名を clipAnime、実行時間を 10s、イージングを linear、開始待ち時間を 0s、繰

り返しを infinite、実行方向は alternate で指定します。

アニメーション名 clipAnime に対応するタイムライン（@keyframes）を指定します。20%（2

秒）おきに clip プロパティで抜き出す画面の範囲を変更しています。こうすることによっ

て、画像を抜き出す窓が移動するように見えます。

@keyframes clipAnime { from { } 20% { clip:rect(0px, 400px, 100px, 300px); } 40% { clip:rect(200px, 400px, 300px, 300px); } 60% { clip:rect(200px, 100px, 300px, 0px); } 80% { clip:rect(0px, 400px, 100px, 300px); } to { clip:rect(0px, 100px, 100px, 0px); } } @-webkit-keyframes clipAnime { from { } 20% { clip:rect(0px, 400px, 100px, 300px); } 40% { clip:rect(200px, 400px, 300px, 300px); } 60% { clip:rect(200px, 100px, 300px, 0px); } 80% { clip:rect(0px, 400px, 100px, 300px); } to { clip:rect(0px, 100px, 100px, 0px); } } #image1 { top: 0px; left: 0px; width: 400px; height: 300px; clip:rect(0px, 100px, 100px, 0px); position: absolute;

animation: clipAnime 10s linear 0s infinite alternate;

-webkit-animation: clipAnime 10s linear 0s infinite alternate; }

(9)

●画像を抜き出す丸い窓を移動させる。

CSS2.1 仕様では、clip プロパティで画像を抜き出すときの形状は四角形だけです。例えば

円形で画像を抜き出したい場合には、clip プロパティは使用できません。円形を透明で抜

いた黒色画像を上に被せる方法で代用するのがよいでしょう。では丸い窓を移動させるア

ニメーションを作ってみましょう。

【ClipAnime3 の説明】

〔HTML の記述（ClipAnime3.html）

〕

id 属性 wrap の div 要素の中に、画像 images/DSC00092L.jpg と全面黒色の中に円形を透明

で抜いた画像 images/clipCircle.png を指定します。

サンプルＣＳＳ３

<!DOCTYPE html> <html> <head> <title>ClipAnime3</title> <meta charset="UTF-8">

<body>

<p>■画像を抜き出す丸い窓を移動させる。</p> <div id="stage">

</div> </body> </html>

(10)

〔CSS の記述（ClipAnime3.css）

〕

#stage ステージのスタイルを指定します。width: 460px; height: 360px;、背景にグレー

（#999999）を指定します。

全面黒色の中に円形を透明に抜いた画像は、抜き出して表示したい画像の縦横２倍のサイ

ズなので、はみ出る部分を表示しないように、見える範囲 width: 400px; height: 300px;

と overflow: hidden;の指定をします。

#image1 画像を指定します。

全面黒色の中に円形を透明に抜いた画像を指定します。横幅が 800px、高さが 600px の全面

黒色の中心に直径 100px の円形を透明に抜いているので、width: 800px; height: 600px;

で指定し、top: -250px; left: -350px;で指定すると、#image1 画像の左上に円形が位置し

ます。

アニメーション名を clipAnime、実行時間を 15s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は alternate で指定します。

#stage { width: 460px; height: 360px; background-color: #999999; border: solid 1px #000000; position: relative; } #wrap { top: 30px; left: 30px; width: 400px; height: 300px; position: absolute; overflow: hidden; } #clipCircle { top: -250px; left: -350px; width: 800px; height: 600px; position: absolute;

animation: clipAnime 15s linear 0s infinite alternate;

-webkit-animation: clipAnime 15s linear 0s infinite alternate; } #image1 { top: 0px; left: 0px; width: 400px; height: 300px; position: absolute; }

(11)

アニメーション名 clipAnime に対応するタイムライン（@keyframes）を指定します。20%（2

秒）おきに全面黒色の中に円形を透明に抜いた画像の位置を変更しています。こうするこ

とによって、画像を抜き出す円形の窓が移動するように見えます。

@keyframes clipAnime { from { } 20% { top: -250px; left: -50px; } 40% { top: -50px; left: -50px; } 60% { top: -50px; left: -350px; } 80% { top: -250px; left: -50px; } to { top: -250px; left: -350px; } } @-webkit-keyframes clipAnime { from { } 20% { top: -250px; left: -50px; } 40% { top: -50px; left: -50px; } 60% { top: -50px; left: -350px; } 80% { top: -250px; left: -50px; } to { top: -250px; left: -350px; } }