Thu, January 19, 2017

CSS3 Transitions アニメーションの使い方

Transitionsを使えばでCSSで手軽にアニメーションを実装することが出来ます。

対応ブラウザ:Safari、Google Chrome

■指定方法

・transition-property:適用するプロパティを指定

  例)
  background-color
  background-image
  background-position
  border-color
  color
  font-size
  width
  height
  など

・transition-duration:変化の速度を指定

  例)
  1s
  0.75s
  0.15s
  など

・transition-timing-function:変化の具合を指定

  例)
  cubic-bezier(x1, y1, x2, y2)
  linear
  ease
  ease-in
  ease-out
  ease-in-out
  など

サンプルコード(マウスオーバーでアニメーション)

a:hover {
	background-color: #39C;
	-webkit-transition-property: color;
	-webkit-transition-duration: .25s;
	-webkit-transition-timing-function: linear;
	transition-property: color;
	transition-duration: .25s;
	transition-timing-function: linear;
}

まとめて指定

a:hover {
	color: red;
	-webkit-transition: color .25s linear;
	transition: color .25s linear;
}

複数指定(,で区切って指定することができます)

a:hover {<br />
	color: red;<br />
	background-color: rgb(235,235,185);<br />
	-webkit-transition: color .25s linear, background-color .15s linear .1s;<br />
	transition: color .25s linear, background-color .15s linear .1s;<br />
}

デモページ

こちらのデモページもわかり易いかとおもいます。
CSS3 アニメーション(Transitions)のデモページ|CSS Lecture

 

情報元:コリス
情報元:Web Designer Depot

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree