HOME > BLOG > CSSアニメーションについて（その2）

CSSアニメーションについて（その2）

CSSアニメーションについて（その2）

スポンサードリンク

こんばんは、
富田です。

前回のエントリーに引き続き、CSSアニメーションについて研究を進めて参りたいと思います。

前回、CSSアニメーションはtransitionとanimationの2種類のプロパティのうち、animationのみの解説をしていたと思うので、今回は残るtransitionについて記事を書いてみたいと思います。

※今回のサンプルデータは下記URLから確認できます。
（https://k-103i.com/anime/button-transition/index.html）

this

transformプロパティの4つの値（transrate、scale,rotate,skew）と、box-shadowを使ってそれぞれtransitionを有効にした場合のサンプルを用意致しました。

以下にサンプルで使用したコードを書き出しております。

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>button-transition</title>
	<meta name="keywords" content="Webアニメーションテスト,トランジション,ケートミィ・メディアラボ">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<meta name="robots" content="follow">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="container">
		<div id="transit-move">
			<a href="">
				移動
			</a>
		</div>
		<div id="transit-zoom">
			<a href="">
				拡大
			</a>
		</div>
		<div id="transit-rotate">
			<a href="">
				回転
			</a>
		</div>
		<div id="transit-skew">
			<a href="">
				歪み
			</a>
		</div>
		<div id="transit-shadow">
			<a href="">
				影付き
			</a>
		</div>
		<div id="transit-move-masked">
			<span>移動・マスク</span>
			<a href="">
				移動・マスク
			</a>
		</div>
		<div id="transit-zoom-masked">
			<a href="">
				拡大・マスク
			</a>
		</div>
		<div id="transit-rotate-masked">
			<a href="">
				回転・マスク
			</a>
		</div>
		<div id="transit-skew-masked">
			<a href="">
				歪み・マスク
			</a>
		</div>
		<div id="transit-shadow-masked">
			<a href="">
				影付き・内側
			</a>
		</div>
	</div>
</body>
</html>

 

スタイルシート

@charset "utf-8";

*,html{
		margin:0;
		padding:0;
		height:100%;
	}

body{
		height:100%;
	}

#container{
		padding-top:4%;
		width:768px;
		height:33%;
		background: #ffffff;
		display:flex;
		margin:auto;
		justify-content: flex-start;
		text-align:center;
		flex-direction: row;
		flex-wrap: wrap;
		margin:auto;
	}

div a{
		display:block;
		width:90px;
		height:90px;
		background:#0099FF;
		line-height:90px;
		border-radius:90px;
		text-decoration:none;
		color:#FFFFFF;
		font-size: 14px;
		box-sizing:border-box;
	}

/*-------------------------------------------
アニメーション部
-------------------------------------------*/
#transit-move a{
		transform:translate(0px, 0px);
		transition:all 0.1s ease-in-out;
		margin:30px;
	}

#transit-move a:hover{
		transform:translate(3px, 3px);
	}

#transit-zoom a{
		transform:scale(1,1);
		transition:all 0.1s ease-in-out;
		margin:30px;
	}

#transit-zoom a:hover{
		transform:scale(1.2,1.2);
	}

#transit-rotate a{
		transform:rotateZ(0deg);
		transition:all 0.2s ease-in-out;
		margin:30px;
	}

#transit-rotate a:hover{
		transform:rotateZ(-360deg);
	}

#transit-shadow a{
		transition:all 0.2s ease-in-out;
		box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
		margin:30px;
	}

#transit-shadow a:hover{
		box-shadow: 3px 3px 2px rgba(0,0,0,0.75);
	}

#transit-skew a{
		transition:all 0.2s ease-in-out;
		transform: skew(0deg,0deg);
		margin:30px;
	}

#transit-skew a:hover{
		transform: skew(-20deg,10deg);
	}

#transit-move-masked,#transit-zoom-masked,#transit-shadow-masked,#transit-skew-masked{
		width:90px;
		height:90px;
		border-radius:50%;
		overflow:hidden;
		margin:30px;
		position:relative;
		z-index: 1;
	}

#transit-rotate-masked{
		width:90px;
		height:90px;
		border-radius:50%;
		overflow:hidden;
		margin:30px;
		position:relative;
		z-index: 1;
	}

#transit-move-masked span{
		display:block;
		border-radius:50%;
		width:90px;
		height:90px;
		position:absolute;
		background:#FF6633;
		background-image:url(../img/logo_mark-2.jpg);
		background-size: cover;
		line-height: 90px;
		color:#111111;
		text-align:center;
		font-size:14px;
		z-index:1;
	}

#transit-move-masked a{
		width:90px;
		height:90px;
		border-radius:50%;
		transition:all 2s ease-in-out;
		position:relative;
		z-index: 3;
		background:none;
		color:#000000;
	}

#transit-move-masked a::before{
		content:'移動・マスク';
		display:block;
		width:90px;
		height:90px;
		border-radius:50%;
		transition:all 0.25s ease-in-out;
		transform:translate(0px,0px);
		position:absolute;
		top:0;
		left:0;
		z-index:2;
		background:#0099FF;
		color:#FFFFFF;
	}

#transit-move-masked a:hover::before{
		transform:translate(90px,-90px);
	}

#transit-zoom-masked a{
		transform:scale(1);
		transition:all 0.1s linear;
		border-radius:50%;
		background-image:url(../img/logo_mark-2.jpg);
		background-size: cover;
		overflow:hidden;
		color:#000000;
	}

#transit-zoom-masked a:hover{
		transform:scale(1.2);
		border-radius:50%;
	}

#transit-rotate-masked a{
		transform:rotateZ(0deg) scale(1,1);
		transition:all 0.2s ease-in-out;
		overflow:hidden;
		background-image:url(../img/logo_mark-2.jpg);
		background-size: cover;
		color:#000000;
	}

#transit-rotate-masked a:hover{
		transform:rotateZ(-360deg) scale(1.2,1.2);
	}

#transit-shadow-masked a{
		transition:all 0.2s ease-in-out;
		box-shadow:0px 0px 0px rgba(0,0,0,0.0) inset,
					0px 0px 0px rgba(0,0,0,0) inset;
	}

#transit-shadow-masked a:hover{
		box-shadow:-3px -3px 1px rgba(255,255,255,0.75) inset,
					3px 3px 2px rgba(0,0,0,0.45) inset;
	}

#transit-skew-masked a{
		transition:all 0.2s ease-in-out;
		transform: skew(0deg,0deg) scale(1,1);
		background-image:url(../img/logo_mark-2.jpg);
		background-size: cover;
		color:#000000;
	}

#transit-skew-masked a:hover{
		transform: skew(-10deg,20deg) scale(1.2,1.2);
	}

transitionについて

transitionには（transition-property、transition-duration、transition-timing-function、transiton-delay）の全部で4つのプロパティをショートハンドで記述することが出来ます。

例えば、下記のように記述可能です。

transition:all 0.2s ease-in-out 1s;

それぞれ空白をおいて記述してあり、並び順が重要になってきます。
記述しない場合は初期値が反映される形になっております。
初期値はそれぞれtransition-propertyがnone、transition-durationが0、transition-timing-functionがease、transiton-delayが0です。

transition-propertyには変更させたいプロパティ名をカンマ分けで記述できます。
それ以外の値だと、noneとallが使用可能で、今回はallを多用致しました。
allだと、trannsitionが適用可能な全てのプロパティが変化します。

transition-durationはtransition（変化）にかかる秒数を指定でき、デフォルトは0（アニメーションさせずにすぐに変化する）ので～sなどの値で秒数を指定します。

transition-timing-functionは変化のタイミングの指定のことで、簡単に言えば動きの緩急のつき具合を調整するものです。

基本的な概念はベジエ曲線（cubic-bezier(数値,数値,数値,数値)）で表現する形になっておりますが、プロパティとしてはease、linear、ease-in、ease-out、ease-in-outの5つの値で簡単に表現できるようになっております。
それぞれのcubic-bazierで記述した場合の値は以下のようになっております。

  • ease・・・            cubic-bazier（0.25,0.1,0.25,1.0）
  • linear・・・         cubic-bazier（0,0,1.0,1.0）同等
  • ease-in・・・       cubic-bazier（0.42,0,1.0,1.0）同等
  • ease-out・・・     cubic-bazier（0,0,0.58,1.0）同等
  • ease-in-out・・・cubic-bazier（0.42,0,0.58,1.0）同等

Illutrator等でベジエ曲線を編集された方であれば経験があるとは思われますが、cubic-bazierのそれぞれの座標はこのようにイメージできます。

cubic-bazier-01

この中の1，4は固定なので、4つの値の中には2と3の値をそれぞれ（ｘ2,ｙ2,x3,y3）と記述します。

transitionプロパティはブラウザーによってはベンダープレフィクスで記述する必要がありますが、従来ではJqueryなどを使用する必要のあったなめらかなアニメーションをCSSのみで実装できるので、使い勝手は良いのではないかと思います。

2016-07-08

Advertisement

コメントを書く







コメント内容


CAPTCHA

*

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

記事一覧に戻る