liguofeng29’s blog

個人勉強用ブログだっす。

┗━TransitionとAnimation

CSS3.0のAnimation - 動画効果(animation属性)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> Animation </title> <style type="text/css"> /* keyframe指定 */ @-webkit-keyframes 'moving' { /* 開始 */ 0% { left: 100px; } /* 40%時のフレーム */ 40% { left: 150px; } /* 60%時のフレーム */ 60% { left: 75px; } /…</meta></head></html>

CSS3.0のTransition - 動画効果

背景色動画効果 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 背景色変換 </title> <style type="text/css"> div { width: 400px; height: 50px; border: 1px solid black; background-color: red; padding: 10px; /* CSS標準属性を指定する */ -moz-transition: background-co…</meta></head></html>

CSS3.0のTransition - 矩形変換(matrixメソッド)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> matrix </title> <style type="text/css"> div { position: absolute; width: 120px; height: 120px; background-color: #bbb; border: 1px solid black; } div.a { left: 50px; top: 50px; } div.b { left: …</meta></head></html>

CSS3.0のTransition - 中心指定変形(transform-origin)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> transform-origin </title> <style type="text/css"> div { position: absolute; width: 90px; height: 90px; background-color: #bbb; border: 2px solid black; } div.a { left: 30px; top: 30px; } div.b …</meta></head></html>

CSS3.0のTransition - 基本変形(transform)

コンポーネントの基本変形サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> transform </title> <style type="text/css"> div { display: inline-block; width: 60px; height: 60px; background-color: #bbb; border: 2px solid black; margin: 20px; } </style> </meta></head></html>