{"id":1320,"date":"2019-09-27T16:24:56","date_gmt":"2019-09-27T08:24:56","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1320"},"modified":"2021-10-23T21:14:03","modified_gmt":"2021-10-23T13:14:03","slug":"css-transition","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/27\/css-transition\/","title":{"rendered":"CSS Transition \u8f49\u5834"},"content":{"rendered":"\n

Transition \u7c21\u5beb<\/h2>\n\n\n\n
\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\ntransition: margin-right 2s; \/* \u52d5\u756b\u6642\u9593 *\/\ntransition: margin-right 2s .5s; \/* \u52d5\u756b\u6642\u9593+\u5ef6\u9072 *\/\ntransition: margin-right 2s ease-in-out; \/* \u52d5\u756b\u6642\u9593+\u5c6c\u6027\u985e\u5225 *\/\ntransition: margin-right 2s ease-in-out .5s; \/* \u52d5\u756b\u6642\u9593+\u5c6c\u6027\u985e\u5225+\u5ef6\u9072 *\/\ntransition: margin-right 2s, color 1s;  \/* \u52d5\u756b\u6642\u9593+\u5c6c\u6027\u985e\u5225+\u5ef6\u9072 *\/\ntransition: all 1s ease-out;  \/* \u904b\u7528\u65bc\u6240\u6709\u5c6c\u6027\uff0c\u52d5\u756b\u6642\u9593+\u5c6c\u6027\u985e\u5225 *\/\n\n\/* Apply to 1 property *\/\n\/* property name | duration *\/\ntransition: margin-right 4s;\n\n\/* property name | duration | delay *\/\ntransition: margin-right 4s 1s;\n\n\/* property name | duration | easing function *\/\ntransition: margin-right 4s ease-in-out;\n\n\/* property name | duration | easing function | delay *\/\ntransition: margin-right 4s ease-in-out 1s;\n\n\/* Apply to 2 properties *\/\ntransition: margin-right 4s, color 1s;\n\n\/* Apply to all changed properties *\/\ntransition: all 0.5s ease-out;\n\n\/* Global values *\/\ntransition: inherit;  \/* \u7e7c\u627f *\/\ntransition: initial; \/* \u521d\u59cb *\/\ntransition: unset; \/* \u672a\u8a2d\u7f6e *\/<\/pre>\n\n\n\n
\u7bc4\u4f8b<\/h4>\n\n\n\n
\/*\u6ed1\u9f20\u6ed1\u5165\u5ef6\u90721\u79d2\u5f8c\uff0c\u958b\u59cb\u6539\u8b8a\u5b57\u9ad4\u5927\u5c0f(\u51714\u79d2)*\/\na {\n  font-size: 14px;\n  transition: font-size 4s 1s;\n}\n\na:hover {\n  font-size: 36px;\n}<\/pre>\n\n\n\n
Transition \u5c6c\u6027<\/h2>\n\n\n\n
transition : transition-property | transition-duration | transition-timing-function | transition-delay;<\/p>\n\n\n\n
ransition-property  \u5c6c\u6027\u8f49\u63db<\/h3>\n\n\n\n
\u6307\u5b9aCSS\u5c6c\u6027\u8f49\u63db\u6548\u679c<\/p>\n\n\n\n
\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\ntransition-property: margin-right;\ntransition-property: margin-right, color;\ntransition-property: all;\ntransition-property: none;\n\n\/* <custom-ident> values *\/\ntransition-property: test_05;\ntransition-property: -specific;\ntransition-property: sliding-vertically;\n\n\/* Multiple values *\/\ntransition-property: test1, animation4;\ntransition-property: all, height, color;\ntransition-property: all, -moz-specific, sliding;\n\n\/* Global values *\/\ntransition-property: inherit; \/* \u7e7c\u627f *\/\ntransition-property: initial; \/* \u521d\u59cb *\/\ntransition-property: unset; \/* \u672a\u8a2d\u7f6e *\/<\/pre>\n\n\n\n
\u7bc4\u4f8b<\/h4>\n\n\n\n
\/*\u6539\u8b8a\u5b57\u9ad4\u5927\u5c0f(\u51714\u79d2)*\/\na {\n  font-size: 14px;\n  transition-property: font-size;\n  transition-duration: 4s;\n}\n\na:hover {\n  font-size: 36px;\n}<\/pre>\n\n\n\n
\/*\u5411\u53f3\u6ed1\u52d5*\/\n\n.slideRight {\n  position: absolute;\n  -moz-transition-property: background-color, color, left;\n  -moz-transition-duration: 5s;\n  -webkit-transition-property: background-color, color, left;\n  -webkit-transition-duration: 5s;\n  -o-transition-property: background-color, color, left;\n  -o-transition-duration: 5s;\n  background-color: red;\n  left: 0%;\n  color: black;\n}\n\n\/*\u5411\u5de6\u6ed1\u52d5*\/\n\n.slideLeft{\n  position: absolute;\n  -moz-transition-property: background-color, color, left;\n  -moz-transition-duration: 5s;\n  -webkit-transition-property: background-color, color, left;\n  -webkit-transition-duration: 5s;\n  -o-transition-property: background-color, color, left;\n  -o-transition-duration: 5s;\n  text-align: center;\n  background-color: blue;\n  left: 90%;\n  color: white;\n  width: 100px;\n  height: 100px;\n}<\/pre>\n\n\n\n
transition-duration  \u6642\u9593<\/h3>\n\n\n\n
\u8a2d\u5b9a\u52d5\u756b\u64ad\u653e\u6642\u9593(\u901f\u5ea6)\uff0c\u9810\u8a2d0\uff0c\u55ae\u4f4d\u70bas\u6216ms\uff0c\u6578\u5b57\u8d8a\u5927\uff0c\u901f\u5ea6\u8d8a\u6162<\/p>\n\n\n\n
\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\ntransition-duration: 500ms;\ntransition-property: margin-right;\n\ntransition-duration: 2s;\ntransition-property: background-color;\n\ntransition-duration: 2s;\ntransition-property: margin-right, color;\n\ntransition-duration: 3s, 1s;\ntransition-property: margin-right, color;<\/pre>\n\n\n\n
\/* \u64ad\u653e\u901f\u5ea6\u5feb\u5230\u6162\uff0c0.5\u79d2\u52304\u79d2 *\/\ntransition-duration: 0.5s\ntransition-duration: 1s\ntransition-duration: 2s\ntransition-duration: 4s\n\n\/* <time> values *\/\ntransition-duration: 6s;\ntransition-duration: 120ms;\ntransition-duration: 1s, 15s;\ntransition-duration: 10s, 30s, 230ms;\n\n\/* Global values *\/\ntransition-duration: inherit;  \/* \u7e7c\u627f *\/\ntransition-duration: initial;  \/* \u521d\u59cb *\/\ntransition-duration: unset; \/* \u672a\u8a2d\u7f6e *\/<\/pre>\n\n\n\n
transition-delay  \u5ef6\u9072<\/h3>\n\n\n\n
\u5ef6\u9072\u591a\u4e45\u8f49\u63db\uff0c\u9810\u8a2d0\uff0c\u55ae\u4f4d\u70bas\u6216ms<\/p>\n\n\n\n
\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\ntransition-delay: 250ms;\ntransition-property: margin-right;\n\ntransition-delay: 1s;\ntransition-property: background-color;\n\ntransition-delay: 1s;\ntransition-property: margin-right, color;\n\ntransition-delay: 1s, 250ms;\ntransition-property: margin-right, color;\n\n\/* \u5ef6\u9072\u6642\u9593\u77ed\u5230\u9577\uff0c0.5\u79d2\u52304\u79d2 *\/\ntransition-duration: 0.5s\ntransition-duration: 1s\ntransition-duration: 2s\ntransition-duration: 4s\n\n\/* <time> values *\/\ntransition-delay: 3s;\ntransition-delay: 2s, 4ms;\n\n\/* Global values *\/\ntransition-delay: inherit; \/* \u7e7c\u627f *\/\ntransition-delay: initial;  \/* \u521d\u59cb *\/\ntransition-delay: unset; \/* \u672a\u8a2d\u7f6e *\/<\/pre>\n\n\n\n
\n\/* \u5ef6\u9072\u6548\u679c *\/\ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  -webkit-transition: width 3s; \/* Safari *\/\n  -webkit-transition-delay: 1s; \/* Safari *\/\n  transition: width 3s;\n  transition-delay: 1s;\n}\n\ndiv:hover {\n  width: 300px;\n}<\/pre>\n\n\n\n
transition-timing-function  \u66f2\u7dda<\/h3>\n\n\n\n
\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\ntransition-timing-function: linear;\ntransition-timing-function: ease-in;\ntransition-timing-function: steps(6, end);\ntransition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);<\/pre>\n\n\n\n
linear<\/h4>\n\n\n\n
\u7dda\u6027\u901f\u7387\u64ad\u653e<\/p>\n\n\n\n
where
<timing-function> =  linear | <cubic-bezier-timing-function> |<step-timing-function><\/p>\n\n\n\n
linear<\/strong><\/td>\u5747\u901f<\/td>= cubic-bezier(0.0, 0.0, 1.0, 1.0)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
ease<\/h4>\n\n\n\n
\u5b9a\u7fa9\u8c9d\u8332\u66f2\u7dda\u901f\u5ea6\uff0c\u9810\u8a2dease

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>,<number> , [0,1]>, <number>)

<step-timing-function> = step-start | step-end | steps([<integer>, <step-position>]?)<\/p>\n\n\n\n
ease<\/strong><\/td>\u6f38\u5feb\u2192\u6f38\u6162<\/td>= cubic-bezier(0.25, 0.1, 0.25, 1.0)<\/td><\/tr>
ease-in<\/strong><\/td>\u6f38\u5feb<\/td>= cubic-bezier(0.42, 0, 1.0, 1.0)<\/td><\/tr>
ease-out<\/strong><\/td>\u6f38\u6162<\/td>= cubic-bezier(0, 0, 0.58, 1.0)<\/td><\/tr>
ease-in-out<\/strong><\/td>\u6f38\u5feb \u2192 \u6f38\u6162 \u2192 \u6f38\u5feb<\/td>= cubic-bezier(0.42, 0, 0.58, 1.0)<\/td><\/tr>
cubic-bezier( n,n,n,n)<\/strong><\/td>\u4ee5\u8c9d\u8332\u66f2\u7dda\u81ea\u5b9a\u7fa9\u901f\u5ea6\u6a21\u5f0f\uff0cn=0~1\u4e2d\u7684\u6578\u503c<\/td>= cubic-bezier(0.1, 0.5 , 0.1 , 0.5)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
steps<\/h4>\n\n\n\n
\u7269\u4ef6\u7b49\u8ddd\u8df3\u52d5\u6548\u679c  ( n,<jumpterm> )
n = \u8df3\u52d5\u6578<jumpterm = \u65b9\u5f0f>  (number, position)

where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end<\/p>\n\n\n\n
jump-start = position:start<\/strong><\/td>\u8d77\u59cb\u9ede\u7269\u4ef6\u7531\u5bec\u5de6\u908a\u958b\u59cb\u8a08\u7b97\u8df3\u8000\u9ede<\/td><\/td><\/tr>
jump-end = position:end<\/strong><\/td>\u8d77\u59cb\u9ede\u7269\u4ef6\u7531\u5bec\u53f3\u908a\u958b\u59cb\u8a08\u7b97\u8df3\u8000\u9ede<\/td><\/td><\/tr>
jump-none<\/strong><\/td>0\uff05\u548c100\uff05\uff0c\u8df3\u52d5\u6642\u95931 \/ n<\/td><\/td><\/tr>
jump-both<\/strong><\/td>0\uff05\u548c100\uff05\u505c\u9813\uff0c\u6642\u9593\u5167\u589e\u52a01\u6b65<\/td><\/td><\/tr>
start<\/strong><\/td>\u5feb\u901f\u958b\u59cb<\/td>= jump-start<\/td><\/tr>
end<\/strong><\/td>\u5feb\u901f\u7d50\u675f<\/td>= jump-end<\/td><\/tr>
step-start<\/strong><\/td>\u9010\u6b65\u958b\u59cb<\/td>= steps(1, jump-start)<\/td><\/tr>
step-end<\/strong><\/td>\u9010\u6b65\u7d50\u675f<\/td>= steps (1, jump-end)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\n\n\/* Keyword values *\/\ntransition-timing-function: ease;\ntransition-timing-function: ease-in;\ntransition-timing-function: ease-out;\ntransition-timing-function: ease-in-out;\ntransition-timing-function: linear;\ntransition-timing-function: step-start;\ntransition-timing-function: step-end;\n\n\/* Function values *\/\ntransition-timing-function: steps(4, jump-end);\ntransition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\n\n\/* Steps Function keywords *\/\ntransition-timing-function: steps(4, jump-start);\ntransition-timing-function: steps(10, jump-end);\ntransition-timing-function: steps(20, jump-none);\ntransition-timing-function: steps(5, jump-both);\ntransition-timing-function: steps(6, start);\ntransition-timing-function: steps(8, end);\n\n\/* Multiple timing functions *\/\ntransition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);\n\n\/* Global values *\/\ntransition-timing-function: inherit; \/* \u7e7c\u627f *\/\ntransition-timing-function: initial;  \/* \u521d\u59cb *\/\ntransition-timing-function: unset; \/* \u672a\u8a2d\u7f6e *\/<\/pre>\n\n\n\n
transition timing effect \u7bc4\u4f8b<\/h3>\n\n\n\n
\u5b8c\u6574\u6a19\u793a<\/h4>\n\n\n\n
\/*\u5ef6\u90722\u79d2\uff0c\u6539\u8b8a\u5b57\u9ad4\u5927\u5c0f(\u51714\u79d2)*\/\n\na{\n  transition-property: font-size;\n  transition-duration: 4s;\n  transition-delay: 2s;\n  font-size: 14px;\n}\n\na:hover{\n  transition-property: font-size;\n  transition-duration: 4s;\n  transition-delay: 2s;\n  font-size: 36px;\n}<\/pre>\n\n\n\n
\u9078\u55ae\u7bc4\u4f8b<\/h4>\n\n\n\n
\/*\u9023\u7d50\u984f\u8272\u6f38\u8b8a\u6548\u679c*\/\n\na{\n    color: #06c;\n}\n\na:hover{\n    color:#5AA0E6;\n    -o-transition: color .20s linear;\n    -webkit-transition: color .20s linear;\n    -moz-transition: color .20s linear;\n    transition:  color .20s linear;\n}<\/pre>\n\n\n\n
\/*\u9023\u7d50\u80cc\u666f\u984f\u8272\u8207\u6846\u6f38\u8b8a\u6548\u679c*\/\n\n*:link, *:visited, *:hover, *:active, *:focus , * {\n-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;\n-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;\n-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;\ntransition: color .20s linear, background-color .20s linear, border-color .20s linear;\n}<\/pre>\n\n\n\n
\u5340\u584a\u7bc4\u4f8b<\/h4>\n\n\n\n
\/*\u5340\u584a\u7e2e\u653e\u6f38\u8b8a\u6548\u679c*\/\n\n\/*\u5bec\u5ea6*\/\ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  -webkit-transition: width 2s; \/* For Safari 3.1 to 6.0 *\/\n  transition: width 2s;\n}\n\ndiv:hover {\n  width: 300px;\n}\n\n\/*\u9577\u5bec*\/\ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  -webkit-transition: width 2s, height 4s; \/* For Safari 3.1 to 6.0 *\/\n  transition: width 2s, height 4s;\n}\n\ndiv:hover {\n  width: 300px;\n  height: 300px;\n}<\/pre>\n\n\n\n
\/* For Safari 3.1 to 6.0 *\/\n#div1 {-webkit-transition-timing-function: linear;}\n#div2 {-webkit-transition-timing-function: ease;}\n#div3 {-webkit-transition-timing-function: ease-in;}\n#div4 {-webkit-transition-timing-function: ease-out;}\n#div5 {-webkit-transition-timing-function: ease-in-out;}\n\n\/* Standard syntax *\/\n#div1 {transition-timing-function: linear;}\n#div2 {transition-timing-function: ease;}\n#div3 {transition-timing-function: ease-in;}\n#div4 {transition-timing-function: ease-out;}\n#div5 {transition-timing-function: ease-in-out;}<\/pre>\n\n\n\n
\u65cb\u8f49\u7bc4\u4f8b<\/h4>\n\n\n\n
\/*Transition + Transform \u65cb\u8f49\u6548\u679c*\/\n\ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; \/* Safari *\/\n  transition: width 2s, height 2s, transform 2s;\n}\n\ndiv:hover {\n  width: 300px;\n  height: 300px;\n  -webkit-transform: rotate(180deg); \/* Safari *\/\n  transform: rotate(180deg);\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Transition \u7c21\u5beb \u7bc4\u4f8b Transition \u5c6c\u6027 transition : transition-...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-1320","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":126,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"predecessor-version":[{"id":2616,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1320\/revisions\/2616"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}