CSS3の変形・アニメーション

transition

transitionは「hover:」などの動作をきっかけにして、アニメーションでプロパティの値を変化させることができるプロパティです。

transition: 変化にかかる時間 プロパティ 変化の仕方 ディレイ;

変化にかかる時間

s 秒
ms ミリ秒

プロパティ
all/none/プロパティ名

変化の仕方
ease(初期値) 滑らかに始まり滑らかに終わる。省略可
linear    一定の速度で変化
ease-in   ゆっくり始まる
ease-out  ゆっくり終わる
ease-in-out ゆっくり始まりゆっくり終わる 

ディレイ
 s 秒
ms ミリ秒

 

transform

transformプロパティは二次元座標での変形を行うプロパティです。

transform: トランスフォーム関数;

トランスフォーム関数

移動

translate( X方向移動距離, Y方向移動距離 )

Y方向移動距離は省略できます。

 

拡大・縮小

scale( X方向倍率, Y方向倍率 ) 

倍率指定は1が1倍です。0.5倍にするには0.5を指定し、1.5倍にするには1.5を指定します。拡大、縮小の原点はオブジェクトの中心です。

 

回転

rotate( 回転の角度 )

回転角度:degで指定

プラスの角度指定で時計回り、マイナスの角度指定で反時計回りになります。

 

使用例1 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3 transformで要素を動かす</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.trans01 {
background-color: blue;
transition: 0.5s linear;/*0.5秒の間に一定の速度で移動*/
}
.trans01:hover {
transform: translate(100px, 0);
}
.trans02 {
background-color: yellow;
transition: 0.5s ease-in-out;/*0.5秒の間に移動、始めと終わりはゆっくり*/
}
.trans02:hover {
transform: translate(0, 100px);
}
.trans03 {
background-color: red;
transition: 0.5s ease-out;/*0.5秒で移動、終わりはゆっくり*/
}
.trans03:hover {
transform: translate(100px, -100px);
}
.trans04 {
background-color: green;
transition: 0.5s ease-in;/*0.5秒で拡大、始めはゆっくり*/
}
.trans04:hover {
transform: scale(1.5, 1.5);/*X1.5倍、Y1.5倍*/
}
.trans05 {
background-color: #DDD;
transition: 0.5s linear;/*0.5秒の間に一定速度で回転*/
}
.trans05:hover {
transform: rotate(-360deg);/*反時計回り*/
}
</style>
<body>
<div class="trans01 box">右へ100px移動</div>
<div class="trans02 box">下へ100px移動</div>
<div class="trans03 box">右へ100px上へ100px移動</div>
<div class="trans04 box">1.5倍に拡大</div>
<div class="trans05 box">360度回転</div>
</body>
</html>

 

使用例2

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
html,body,h1,h3,p,ul,li {
margin:0 ;
padding: 0;
}

ul {
list-style: none;
}

img {
border: 0;
vertical-align: bottom;
}
.container {
width: 960px;
margin: 20px auto 0;
background-color: #EEE;
}

h1,h1+p {
width:960px;
text-align: center;
margin-bottom: 10px;
}

ul {
overflow: hidden;
/* height: 500px;*/
}

ul li {
display: block;
float: left;
width: 300px;
height: 200px;
margin: 10px;
position: relative;
overflow: hidden;
}

#cap1 {
width: 100%;
/*position:absoluteを付けた時に親要素に対して%指定できる。
この場合の100%は親のliと同じ300pxになる*/
height: 100%;
background-color: #C93;
color: #FFF;
position: absolute;
top: 0;
left: 0;
opacity: 0; /*0で透明、1で不透明になる*/
}
#cap1:hover {
opacity: 1; /*0で透明、1で不透明になる*/
transition: 0.5s linear;/*0.5秒で移動*/
background: rgba(204,153,51,0.4);
}

#cap2 {
width: 100%;
height: 100%;
background-color: #C93;
color: #FFF;
position: absolute;
top: 100%;
left: 0;
}

li#photo2:hover #cap2 {
top: 0;
transition: 0.5s linear;
background: rgba(204,153,51,0.4);#
}

#cap3 {
width: 100%;
height: 100%;
background-color: #C93;
color: #FFF;
position: absolute;
top: 0;
right: 100%;
}

li#photo3:hover #cap3 {
right: 0;
transition: 0.5s linear;
background: rgba(204,153,51,0.4);#
}

</style>
<body>
<div class="container">
<h1>transitionによるアニメ</h1>
<p>マウスを乗せたら説明文が出て来ます。</p>

<ul>
<li>
<img src="img/01.png" alt="#">
<div id="cap1">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</li>
<li id="photo2">
<img src="img/02.png" alt="#">
<div id="cap2">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</li>
<li id="photo3">
<img src="img/03.png" alt="#">
<div id="cap3">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</li>
</ul>
</div><!--/.container-->
</body>
</html>

 

実行すると「transitionによるアニメ」という題で3枚の写真が表示されます。

f:id:develog:20160901104318p:plain

 

左の写真の上にマウスカーソルを乗せると、ゆっくり「cap1」の画像に変わります。

f:id:develog:20160901104341p:plaincap1

 

真ん中の写真の上にマウスカーソルを乗せると、下からゆっくり別の画像が現れます。「cap2-1」ー>「cap2-2」 

f:id:develog:20160901104400p:plaincap2-1

f:id:develog:20160901104406p:plaincap2-2

 

右の写真の上にマウスカーソルを乗せると、左からゆっくり別の画像が現れます。「cap3-1」ー>「cap3-2」  

f:id:develog:20160901104422p:plaincap3-1

f:id:develog:20160901104427p:plaincap3-2