{"id":1937,"date":"2011-11-20T01:06:34","date_gmt":"2011-11-19T16:06:34","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=1937"},"modified":"2012-02-10T01:57:44","modified_gmt":"2012-02-09T16:57:44","slug":"css3-transition%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=1937","title":{"rendered":"css3 transition\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},"content":{"rendered":"

css3\u3067\u306ftransition\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u3044\u3066\u6642\u9593\u7684\u5909\u5316\u3092\u3064\u3051\u308b\u4e8b\u304c\u53ef\u80fd\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

transition \uff08\u6642\u9593\u7684\u5909\u5316\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\uff09<\/strong><\/h4>\n

transition\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001transition\u52b9\u679c\uff08\u6642\u9593\u7684\u5909\u5316\uff09\u3092\u307e\u3068\u3081\u3066\u8a2d\u5b9a\u3059\u308b\u5834\u5408\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n

transition: all 0.6s linear 0;<\/pre>\n
-moz-transition: all 0.6s linear 0;\r\n-webkit-transition: all 0.6s linear 0;<\/pre>\n
transition: all(\u203b1) 0.6s\uff08\u203b2\uff09 linear(\u203b3) 0(\u203b 4);<\/p>\n
\u203b1 \u00a0\u9069\u5fdc\u3059\u308bcss\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u8a2d\u5b9a\uff08backgroung,border\u306a\u3069\u500b\u5225\u3067\u6307\u5b9a\u53ef\uff09<\/p>\n
\u203b2 \u5909\u5316\u306b\u304b\u304b\u308b\u6642\u9593\u3002<\/p>\n
\u203b3 \u5909\u5316\u306e\u4ed5\u65b9\uff08linear\u306f\u4e00\u5b9a\u3002\uff09<\/p>\n
\u203b4 \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u59cb\u3081\u308b\u30bf\u30a4\u30df\u30f3\u30b0(0\u3060\u3068\u3059\u3050\u30b9\u30bf\u30fc\u30c8\u3057\u307e\u3059\u3002)<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/h3>\n
\u2193 \u500b\u5225\u3067\u6307\u5b9a\u3059\u308b\u5834\u5408 \u2193\u00a0<\/strong><\/p>\n
transition-property\uff08\u6642\u9593\u7684\u5909\u5316\u3092\u9069\u5fdc\u3059\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u6307\u5b9a\uff09\u203b\uff11<\/strong><\/strong><\/h4>\n
transition-property\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001transition\uff08\u6642\u9593\u7684\u5909\u5316\uff09\u52b9\u679c\u3092\u9069\u7528\u3059\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u3092\u6307\u5b9a\u3059\u308b\u5834\u5408\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
all\u3000\uff1a\u3000\u5909\u5316\u3092\u9069\u7528\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3059\u3079\u3066\u304c\u5909\u5316\uff08\u521d\u671f\u5024\uff09<\/p>\n
none\u3000\uff1a\u3000\u3069\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3082\u5909\u5316\u3055\u305b\u306a\u3044<\/p>\n
\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u3000\uff1a\u3000\u5909\u5316\u3055\u305b\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u306e\u30ea\u30b9\u30c8\u3092\u30ab\u30f3\u30de\uff08 , \uff09\u533a\u5207\u308a\u3067\u6307\u5b9a<\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
transition-property: background-color, color,width;\r\n-webkit-transition-property: background-color, color,width;\u00a0<\/pre>\n
\u307e\u3068\u3081\u3066\u6307\u5b9a\u3000transition: all<\/span> 0.6s linear 0;<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/h3>\n
transition-duration \uff08\u5909\u5316\u306b\u639b\u304b\u308b\u6642\u9593\u3092\u6307\u5b9a<\/strong>\uff09\u203b2<\/strong><\/h4>\n
transition-duration\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u5909\u5316\u306b\u639b\u304b\u308b\u6642\u9593\u3092\u6307\u5b9a\u3059\u308b\u5834\u5408\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
\u6642\u9593\u3000\uff1a\u3000\u5909\u5316\u306b\u639b\u304b\u308b\u6642\u9593\u3092\u6307\u5b9a\uff08\u521d\u671f\u5024\u306f0\uff09<\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
transition-duration:1s;\r\n-webkit-transition-duration:1s;<\/pre>\n
\u307e\u3068\u3081\u3066\u6307\u5b9a\u3000transition: all 0.6s<\/span> linear 0;<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/h3>\n
transition-timing-function (\u5909\u5316\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u30fb\u4ed5\u65b9\u3092\u6307\u5b9a<\/strong>) \u203b3<\/strong><\/h4>\n
transition-timing-function\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u5909\u5316\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u30fb\u4ed5\u65b9\u3092\u6307\u5b9a\u3059\u308b\u5834\u5408\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
ease\u3000\uff1a\u3000\u958b\u59cb\u3068\u5b8c\u4e86\u3092\u6ed1\u3089\u304b\u306b\u3059\u308b\uff08\u521d\u671f\u5024\uff09<\/p>\n
linear\u3000\uff1a\u3000\u4e00\u5b9a<\/p>\n
ease-in\u3000\uff1a\u3000\u3086\u3063\u304f\u308a\u59cb\u307e\u308b<\/p>\n
ease-out\u3000\uff1a\u3000\u3086\u3063\u304f\u308a\u7d42\u308f\u308b<\/p>\n
ease-in-out\u3000\uff1a\u3000\u3086\u3063\u304f\u308a\u59cb\u307e\u3063\u3066\u3086\u3063\u304f\u308a\u7d42\u308f\u308b\u3000<\/p>\n
cubic-bezier(\u6570\u5024, \u6570\u5024, \u6570\u5024, \u6570\u5024)\u3000\uff1a \u6570\u5024\u306b\u3088\u308b\u6307\u5b9a<\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
transition-timing-function:ease-in-out;\r\n-webkit-transition-timing-function:ease-in-out;<\/pre>\n
\u307e\u3068\u3081\u3066\u6307\u5b9a\u3000transition: all 0.6s linear<\/span> 0;<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/h3>\n
transition-delay \u00a0\uff08\u5909\u5316\u304c\u3044\u3064\u59cb\u307e\u308b\u304b\u3092\u6307\u5b9a\uff09\u203b4<\/strong><\/h4>\n
transition-delay\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u5909\u5316\u304c\u3044\u3064\u59cb\u307e\u308b\u304b\u3092\u6307\u5b9a\u3059\u308b\u5834\u5408\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
\u6642\u9593\u3000\uff1a\u3000\u5909\u5316\u304c\u59cb\u307e\u308b\u6642\u9593\u3092\u6307\u5b9a\uff08\u521d\u671f\u5024\u306f0\uff09<\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
transition-delay:3s;\r\n-webkit-transition-delay:3s;<\/pre>\n
\u307e\u3068\u3081\u3066\u6307\u5b9a\u3000transition: all 0.6s linear 0<\/span>;<\/p>\n
css3 \u62e1\u5927,\u7e2e\u5c0f,\u79fb\u52d5,\u5909\u5f62 transform\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u307e\u3068\u3081<\/a>\u306b<\/h3>\n
transition\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u5909\u5316\u3055\u305b\u305f\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/h3>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"
css3\u3067\u306ftransition\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u3044\u3066\u6642\u9593\u7684\u5909\u5316\u3092\u3064\u3051\u308b\u4e8b\u304c\u53ef\u80fd\u3068\u306a\u308a\u307e\u3059\u3002 transition \uff08\u6642\u9593\u7684\u5909\u5316\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\uff09 transition\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001transition\u52b9\u679c\uff08\u6642\u9593\u7684\u5909\u5316\uff09\u3092\u307e\u3068 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[177,96,44,95,178],"class_list":["post-1937","post","type-post","status-publish","format-standard","hentry","category-css3","tag-css3","tag-transition","tag-web","tag-95","tag-178"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/1937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1937"}],"version-history":[{"count":17,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/1937\/revisions"}],"predecessor-version":[{"id":2906,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/1937\/revisions\/2906"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}