THE HAM MEDIA BLOG

‚±‚̃uƒƒO‚Å‚à‚ЂÁ‚»‚è‚ÆŽg‚Á‚Ä‚¢‚éCSS‚Å‚ÌanimationBŒ‹\¡X‚Å‚·‚ªA‚±‚ê‚à–ˆ‰ñ’²‚ׂ½‚肵‚‚Žg‚Á‚Ä‚¢‚é‚̂ŁA•×‹­‚µ‚½‚±‚Æ‚ð‘‚«‚¾‚µ‚Ä‚¨‚«‚Ü‚·B

¡‰ñ‚Í‚»‚Ì’†‚Å‚àtransition‚ðŽg‚Á‚ăAƒjƒ[ƒVƒ‡ƒ“‚ð‚݂Ă݂悤‚ÆŽv‚¢‚Ü‚·B

webkit‚ÆOperaAFirefox4‚Å“®ì

2011”N1ŒŽŒ»ÝACSS3‚̃Aƒjƒ[ƒVƒ‡ƒ“‚ª“®ì‚·‚é‚Ì‚Íwebkit‚ÌSafari‚ÆChromeA‚»‚ê‚ÆOpera‚ÆFirefox4‚Å“®ì‚µ‚Ü‚·iIE–¢Šm”FjB‚½‚¾‚µA‚»‚ꂼ‚ê‚̃uƒ‰ƒEƒU‚Ńxƒ“ƒ_[ƒvƒŒƒtƒBƒbƒNƒXiÚ“ªŒêj‚ª‚È‚¢‚Æ“®ì‚µ‚Ü‚¹‚ñB

‚Ü‚¸‚̓fƒ‚‚ð

‚Ü‚¸‚ÍŠÈ’P‚ɁAƒuƒƒbƒN‚ª‘å‚«‚­‚È‚éƒfƒ‚‚©‚çB

¡CSS

.demo div{
    background-color:#0000ff;
    width:100px;
    height:100px;
    color:#ffffff;

    /*ˆÈ‰ºƒAƒjƒ[ƒVƒ‡ƒ“‚̐ݒèi››‚̓xƒ“ƒ_[ƒuƒŒƒtƒBƒbƒNƒXj*/
    -››-transition-property:background-color,width,height;
    -››-transition-duration: 2s;
    -››-transition-delay: 0s;
    -››-transition-timing-function: ease;
}

/*ƒAƒjƒ[ƒVƒ‡ƒ“‚³‚¹‚½Û‚Ì“®ì
.demo div:hover{
    background-color:#ff00ff;
    width:450px;
    height:200px;
    color:#000000;
}

div‚É:hover‚ð‚‚¯‚Ä‚¨‚è‚Ü‚·‚̂ŁAIE‚̈ꕔ‚Í‚±‚ê‚·‚ç“®ì‚µ‚È‚¢‚Å‚·B

‰Šú‚ł́A”wŒi‚ªÂŒnFA‰¡•‚ª150pxA‚‚³100pxAƒeƒLƒXƒg‚Í”’B¡‰ñ‚̃fƒ‚‚ł́A:hover‚ðŽw’肵‚Ä‚¢‚é‚̂ŁA‚»‚Ì—v‘f‚̏ã‚Ƀ}ƒEƒX‚ðæ‚¹‚é‚ƃAƒjƒ[ƒVƒ‡ƒ“‚ª“®ì‚µ‚Ü‚·B•Ï‰»Œã‚Í”wŒi‚ªƒsƒ“ƒNA•450pxA‚‚³200pxAƒeƒLƒXƒg‚ª•‚ɕω»‚µ‚Ü‚·B

¡ƒfƒ‚

‚»‚ꂼ‚ê‚̃uƒ‰ƒEƒU‚ɍ‡‚킹‚½ƒ{ƒ^ƒ“‚ð‰Ÿ‚µ‚ăvƒŒƒtƒBƒbƒNƒX‚ð•ÏX‚µ‚½Œã‚ɁAÂ‚¢ŽlŠp‚̏ã‚Ƀ}ƒEƒX‚ðæ‚¹‚Ä‚Ý‚Ä‚­‚¾‚³‚¢BƒvƒŒƒtƒBƒbƒNƒX‚ð‚‚¯‚éƒ{ƒ^ƒ“‚ð‰Ÿ‚³‚È‚¢‚Æ“®‚«‚Ü‚¹‚ñ‚µA‘Ήžƒuƒ‰ƒEƒU‚Å‚Í‚È‚¯‚ê‚΃Aƒjƒ[ƒVƒ‡ƒ“‚Å“®ì‚µ‚Ü‚¹‚ñBÂ‚¢ŽlŠp‚̏ã‚Ƀ}ƒEƒX‚ð‚Ì‚¹‚¸‚Æ‚àAŽáŠ±Šp“x‚ª•Ï‚í‚è‚Ü‚·B

ƒAƒjƒ[ƒVƒ‡ƒ“‚ª“®‚©‚È‚¢ŠÂ‹«‚Å‚ ‚ê‚΁A‚·‚®‚É‘å‚«‚³‚ƐF‚ª•Ï‚í‚è‚Ü‚·‚ªAƒAƒjƒ[ƒVƒ‡ƒ“‚ª—LŒø‚É‚È‚ê‚΁A1•b‚Ì‘¬‚³‚ŃAƒjƒ[ƒVƒ‡ƒ“‚µ‚È‚ª‚ç:hover‚ÉŽw’肵‚½’l‚ɕω»‚µ‚Ü‚·B

.demo div{
-››-transition-property:background-color,width,height;
-››-transition-duration: 1s;
-››-transition-timing-function: ease;
-››-transition-delay: 0s;
}

-moz--webkit--o-

‚³‚āAŠeƒvƒƒpƒeƒB‚ð‚»‚ê‚¼‚ê‚Ý‚Ä‚¢‚«‚Ü‚µ‚傤B

transition-property

transition‚ð“K—p‚·‚éƒvƒƒpƒeƒBiƒAƒjƒ[ƒVƒ‡ƒ“‚ð‚³‚¹‚éƒvƒƒpƒeƒBj‚ðÝ’肵‚Ü‚·Bbackground-color‚âcolor‚È‚Ç‚Ì—v‘f‚ðÝ’肵‚Ä‚¨‚­‚±‚ƂŁAŽw’肵‚½—v‘f‚ªƒAƒjƒ[ƒVƒ‡ƒ“‚·‚é‚悤‚É‚È‚è‚Ü‚·B

‚±‚̃vƒƒpƒeƒB‚ð‘‚¢‚½Û‚́AŽw’肵‚½•”•ª‚Ì—v‘f‚¾‚¯‚ª“®‚­‚悤‚É‚È‚è‚Ü‚·BŽ©•ª‚Í‚±‚̃vƒƒpƒeƒB‚ð‘‚¢‚āA—v‘f‚ðŽw’肵–Y‚ê‚āu‚ ‚êH“®‚©‚È‚¢‚æIHv‚ƍQ‚Ä‚Ä‚µ‚Ü‚¤‚±‚Æ‚ª‘½‚¢‚Å‚·BBB‚²’ˆÓ‚ðB

‚¿‚Ȃ݂ɁA•Ï‰»‚³‚¹‚ç‚ê‚é—v‘f‚͉º‹L‚Ì’Ê‚è‚É‚È‚è‚Ü‚·B

Property Name	Type
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

¦ˆø—pFCSS Transitions Module Level 3 Properties from CSS

ˆê•”‚̓uƒ‰ƒEƒU‚É‚æ‚Á‚Ä‚Í‚¤‚Ü‚­“®ì‚µ‚È‚¢‚Æ‚©‚àH‚Ü‚¾–¢ŒŸØ‚Ȃ̂ŁA‚¢‚ë‚¢‚뎎‚µ‚Ä‚Ý‚½‚¢‚ÆŽv‚¢‚Ü‚·B

ã‚Ì—v‘f‚̈ꕔ‚ð‚¿‚å‚Á‚Æ‚½‚ß‚µ‚Ä‚Ý‚Ü‚µ‚傤

¡Opacityƒfƒ‚ ‚»‚Ì‚P

:hover‚Å—v‘f‚𔼓§–¾‚É‚µ‚Ü‚·B

.demo3:hover div{
	opacity:0.3;
}

‚±‚ê‚ðposition‚â”wŒi‚È‚Ç‚Æ‘g‚ݍ‡‚킹‚½‚烍[ƒ‹ƒI[ƒo[‚Æ‚©‚à‰Â”\‚Å‚·‚ˁB

¡Opacityƒfƒ‚ ‚»‚Ì‚Q

position‚Å—v‘f‚ð“ñ‚d‚˂āA:hover‚ŏã‚Ì—v‘f‚ðopacity‚ŏÁ‚µ‚Ü‚·B

div.demo4front{
	position:absolute;
	z-index:2
}
div.demo4back{
	position:absolute;
	z-index:1
}
.demo4:hover div.demo4front{
	opacity:0;
}

¡positionƒfƒ‚

:hover‚Å—v‘f‚ª¶‚©‚ç‰E‚Ɉړ®‚µ‚Ü‚·B

.demo5:hover div{
	left:320px;
}

transition-duration

transition‚̕ω»‚ÌŽžŠÔ‚ðŽw’肵‚Ü‚·B‚±‚̃vƒƒpƒeƒB‚ª‚È‚¢‚Ætransition‚ª“®ì‚µ‚Ü‚¹‚ñB’l‚Í0.5s‚â1s‚ȂǁAs‚Æ‚¢‚¤’PˆÊ‚ÅŽw’肵‚Ü‚·B1s‚Å1•b‚Å‚·B’l‚ª‘å‚«‚¢‚Ù‚Ç‚ä‚Á‚­‚è•Ï‰»‚µA’l‚ª¬‚³‚¢‚Ù‚Ç‘‚­•Ï‰»‚µ‚Ü‚·B

¡ŽžŠÔƒfƒ‚

‰º‚̃GƒŠƒA‚Ƀ}ƒEƒX‚ðæ‚¹‚é‚Æ’†‚É‚ ‚é‚Q‚‚̃uƒƒbƒN‚ª‰¡‚ɐL‚Ñ‚Ü‚·Bã‚ª0.5•b‚ŁA‰º‚ª‚T•b‚©‚¯‚ăAƒjƒ[ƒVƒ‡ƒ“‚µ‚Ü‚·B

‚ä‚Á‚­‚èƒAƒjƒ[ƒVƒ‡ƒ“‚³‚¹‚½‚¢Žž‚͐”’l‚ð‘å‚«‚­‚µ‚Ä‚Ý‚Ä‚­‚¾‚³‚¢B

¡ŽžŠÔƒfƒ‚2

ã‚̃fƒ‚‚ł͉¡‚ɐL‚΂µ‚Ä‚Ý‚Ü‚µ‚½‚ªA¶‚©‚ç‰E‚ւ̈ړ®‚Å‚àŽžŠÔŽw’è‚É‚æ‚é•Ï‰»‚ðŒ©‚Ä‚Ý‚Ü‚µ‚傤

0•b‚©‚ç5•b‚܂ŁA‚P•b‚݂ŃuƒƒbƒN‚ð—pˆÓ‚µ“®‚©‚µ‚Ä‚Ý‚Ü‚µ‚½B0•b‚̓Aƒjƒ[ƒVƒ‡ƒ“‚¹‚¸ˆÚ“®‚·‚é‚悤‚Å‚·B‚Ü‚ŸA“–‘R‚Å‚·‚æ‚ˁB0•b‚Å‚·‚©‚çB

transition-timing-function

transition‚̕ω»‘¬“x‚ðŽw’è‚·‚邱‚Æ‚ª‚Å‚«‚Ü‚·Bˆê’è‚Ì‘¬“x‚ŕω»‚³‚¹‚½‚èAÅ‰‘‚­AÅŒã’x‚­‚È‚Ç‚Ì‘¬“x‚ðŽw’è‚Å‚«‚Ü‚·B

Žw’èo—ˆ‚é’l‚͈ȉº‚Ì—p‚É‚È‚Á‚Ä‚¢‚Ü‚·B

ease	ŠŠ‚ç‚©‚É
linear	ˆê’葬“x
ease-in	‚ä‚Á‚­‚聨‘¬‚­
ease-out	‘¬‚­¨‚ä‚Á‚­‚è
ease-in-out	‚ä‚Á‚­‚聨‘¬‚­¨‚ä‚Á‚­‚è
cubic-bezier	ƒAƒjƒ[ƒVƒ‡ƒ“‚̕ω»‚ÌŽd•û‚ðŽw’è

¡‘¬“xƒfƒ‚

‚»‚ꂼ‚ê‚Ì‘¬“x‚ðŒ©‚Ä‚Ý‚Ü‚µ‚傤B¡‰ñ‚Í‚Ç‚ê‚à‚R•b‚ł̕ω»Žw’è‚Å‚·Bcubic-bezier‚Í(0,1,1,0)‚ðŽw’èB

cubic-bezier‚Å(0,1,1,0)‚ðŽw’肵‚½‚çA‚È‚ñ‚¾‚©Šï–­‚È“®‚«‚ɁiÎj

transition-delay

transition‚̕ω»‚ªŽn‚܂鎞ŠÔ‚ðŽw’è‚·‚邱‚Æ‚ª‚Å‚«‚Ü‚·B’l‚ª‘å‚«‚¢‚قǁA•Ï‰»‚·‚é‚Ü‚ÅŽžŠÔ‚ª‚©‚©‚è‚Ü‚·B

¡’x‰„ƒfƒ‚

‚»‚ꂼ‚ê‚ÌŠJŽn‚̃^ƒCƒ~ƒ“ƒO‚̍·‚ðŒ©‚Ä‚Ý‚Ü‚µ‚傤B¡‰ñ‚à‘S•”‚R•b‚ł̕ω»Žw’è‚Å‚·B“®ìŠJŽn‚̃^ƒCƒ~ƒ“ƒO‚ª‚P•b‚¸‚ˆႢ‚Ü‚·B

‚Ü‚Æ‚ß‚Ä‹Lq

‚±‚±‚Ü‚Åà–¾‚µ‚½ƒvƒƒpƒeƒB‚Í‚Ü‚Æ‚ß‚Ä‹Lq‚·‚邱‚Æ‚ª‚Å‚«‚Ü‚·B

duration‚ÌŽžŠÔ‚¾‚¯‚ª‹Lq‚µ‚Ä‚ ‚ê‚΃Aƒjƒ[ƒVƒ‡ƒ“‚µ‚Ü‚·B

‹Lq—á

div.demo9 div{
	-››-transition: 1s ease-in-out 0s;
}

Œ»Ý‚ÌOpera‚¾‚ÆŠpŠÛ‚̓Aƒjƒ[ƒVƒ‡ƒ“‚µ‚È‚¢‚Á‚Û‚¢‚Å‚·‚ˁB

ƒvƒƒpƒeƒB‚²‚Æ‹Lq

‚Ü‚Æ‚ß‚Ä‹Lq‚̍ۂŁAƒvƒƒpƒeƒB‚²‚Æ‚ÉŽw’è‚𕪂¯‚éÛ‚́AƒvƒƒpƒeƒB‚²‚ƂɃRƒ“ƒ}‚Å‹æØ‚é•K—v‚ª‚ ‚è‚Ü‚·BƒAƒjƒ[ƒVƒ‡ƒ“‚³‚¹‚½‚¢ƒvƒƒpƒeƒB‚Æduration‚ÌŽw’肾‚¯‚ª‚ ‚ê‚Γ®ì‚µ‚Ü‚·B

div.demo9 div{
	-››-transition: width 1s ease-in-out 0s,
			  height 1s ease 1s,
			  background-color 1s ease 0s;
}

ã‚̃fƒ‚‚ðŒ©‚é‚Æ‚í‚©‚é‚Ì‚Å‚·‚ªAƒvƒƒpƒeƒB‚²‚Æ‚Édelay‚ð•Ï‚¦‚é‚ƁAdelay‚ÌŽžŠÔ‚²‚ƂŃvƒƒpƒeƒB‚̕ω»‚ª•Ï‚í‚è‚Ü‚·B

“¯‚¶—v‘f‚ð‹Lq‚µ‚½Û‚ÍŒã‚ë‚ɏ‘‚¢‚½“à—e‚ŏ㏑‚«‚³‚ê‚Ä‘O‚É‹Lq‚µ‚½“à—e‚Í“®ì‚µ‚Ü‚¹‚ñB

‚¢‚ë‚¢‚뎎‚µ‚Ä‚¢‚Ä‹C‚¢‚½‚±‚Æ

¡‰ñ‚¢‚ë‚¢‚뎎‚µ‚Ä‚¢‚Ä‹C‚¢‚½‚ñ‚Å‚·‚¯‚ǁAƒuƒ‰ƒEƒU‚É‚æ‚Á‚ẮAƒAƒjƒ[ƒVƒ‡ƒ“‚µ‚È‚¢—v‘f‚à‚¢‚ë‚¢‚ë‚ ‚é‚悤‚Å‚·BƒAƒjƒ[ƒVƒ‡ƒ“‚µ‚Ä‚¢‚é‚©‚à‚µ‚ê‚È‚¢‚¯‚ǁA‚ ‚êH‚Á‚ÄŽv‚¤‚悤‚È‚Ì‚àiz-index‚Æ‚©jBOpera‚¾‚ÆŠpŠÛ‚ªƒAƒjƒ[ƒVƒ‡ƒ“‚µ‚È‚¢‚Á‚Û‚¢‚Å‚·‚µB‚»‚ê‚Æ

‚»‚ê‚ÆFirefox4‚̃vƒŒƒrƒ…[‚ð¡‰ñWindows”Å‚Å‚Ý‚Ä‚Ý‚½‚Ì‚Å‚·‚ªAƒAƒjƒ[ƒVƒ‡ƒ“^‚ÁÅ’†‚Á‚āAƒ}ƒEƒXƒzƒC[ƒ‹‚ł̃XƒNƒ[ƒ‹‚Á‚Ä‚µ‚È‚¢‚悤‚ȁci‹C‚Ì‚¹‚¢‚¾‚Á‚½‚ç‚·‚Ý‚Ü‚¹‚ñjB‚»‚ê‚Ƃ܂Ƃ߂ď‘‚­ƒVƒ‡[ƒgƒnƒ“ƒhA‚±‚ê‚à‚¤‚Ü‚­“®‚©‚È‚¢H‹Lq•û–@‚ªˆ«‚¢‚Ì‚©‚È‚ c‚±‚ê‚͍¡Œã‚àƒ`ƒFƒbƒN‚µ‚Ä‚Ý‚Ü‚·B

‚Æ‚Ü‚ŸA‚¢‚ë‚¢‚뎎‚µ‚Ä‚Ý‚Ä‚±‚»‚í‚©‚é‚Á‚Ä‚Ì‚ª‚ ‚è‚Ü‚·‚ˁB

¡‰ñ‚Ítransition‚Ì‚ÝŽŽ‚µ‚Ä‚Ý‚½‚Ì‚Å‚·‚ªAŽŸ‚Í‚à‚¤ˆê‚‚Ìanimation‚ð‚½‚ß‚µ‚Ă݂悤‚ÆŽv‚¢‚Ü‚·B