{"id":6352,"date":"2022-03-16T16:09:02","date_gmt":"2022-03-16T08:09:02","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=6352"},"modified":"2022-03-22T16:56:07","modified_gmt":"2022-03-22T08:56:07","slug":"css-functions-cubic-bezier","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2022\/03\/16\/css-functions-cubic-bezier\/","title":{"rendered":"\u66f2\u7dda\u51fd\u6578 cubic-bezier()"},"content":{"rendered":"\n

\u4e09\u6b21\u8c9d\u8cfd\u723e\u66f2\u7dda (Cubic Bezier curve)<\/strong> \u21e2 cubic-bezier() \u7531P0\u3001P1\u3001P2 \u548c P3\u56db\u500b\u9ede\u5b9a\u7fa9\uff0cP0(0, 0)\u5230P3(1, 1)\u70ba\u66f2\u7dda\u8d77\u9ede\u8207\u7d42\u9ede\uff0c\u6578\u503c\u4ee3\u8868\u6700\u7d42\u6642\u9593\u8207\u6700\u7d42\u72c0\u614b\u3002<\/p>\n\n\n\n

P0\uff1a\u9ed8\u8a8d\u503c (0, 0)
P1\uff1a\u52d5\u614b\u53d6\u503c (x1, y1)
P2\uff1a\u52d5\u614b\u53d6\u503c (x2, y2)
P3\uff1a\u9ed8\u8a8d\u503c (1, 1)<\/p>\n\n\n\n

\n
\n

\u261e \u8a9e\u6cd5\u8aaa\u660e<\/h3>\n\n\n\n

CSS\u8a9e\u6cd5<\/strong> \u21e2 cubic-bezier(x1, y1 ,x2 , y2)
x\u8ef8(x1 \u548c x2 )\u6578\u503c\u9808\u70ba0\u52301\uff0cy\u8ef8\u6578\u503c\u5247\u7121\u9650\u5236\uff0c\u53ef\u8207 animation-timing-function \u548c transition-timing-function \u642d\u914d\u3002<\/p>\n\n\n\n

animation-timing-function \u6578\u503c<\/h4>\n\n\n\n
\/* Keyword values *\/\nanimation-timing-function: ease;\nanimation-timing-function: ease-in;\nanimation-timing-function: ease-out;\nanimation-timing-function: ease-in-out;\nanimation-timing-function: linear;\nanimation-timing-function: step-start;\nanimation-timing-function: step-end;\n\n\/* Function values *\/\nanimation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\nanimation-timing-function: steps(4, end);\n\n\/* Steps Function keywords *\/\nanimation-timing-function: steps(4, jump-start);\nanimation-timing-function: steps(10, jump-end);\nanimation-timing-function: steps(20, jump-none);\nanimation-timing-function: steps(5, jump-both);\nanimation-timing-function: steps(6, start);\nanimation-timing-function: steps(8, end);\n\n\/* Multiple animations *\/\nanimation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);\n\n\/* Global values *\/\nanimation-timing-function: inherit;\nanimation-timing-function: initial;\nanimation-timing-function: revert;\nanimation-timing-function: unset;<\/pre>\n\n\n\n
transition-timing-function \u6578\u503c<\/h4>\n\n\n\n
\/* Keyword *\/\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\/* \u51fd\u6578 *\/\ntransition-timing-function: steps(4, end);\ntransition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\ntransition-timing-function: frames(10);\n\n\/* \u591a\u500b\u51fd\u6578 *\/\ntransition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);\n\n\/* \u5168\u57df\u503c *\/\ntransition-timing-function: inherit;\ntransition-timing-function: initial;\ntransition-timing-function: unset;\n\n\/* \u5305\u542b transition-property *\/\ntransition-property: width, height;\ntransition-timing-function: ease-in, ease-out; \/\/ ease-in to width and ease-out to height\n<\/pre>\n\n\n\n
\u53c3\u8003\u5c0d\u61c9\u6578\u503c<\/strong><\/p>\n\n\n\n
transition-timing-function(ease)<\/td>cubic-bezier(0.25,0.1,0.25,1)<\/td><\/tr>
transition-timing-function(ease-in)<\/td>cubic-bezier(0.42,0,1,1)<\/td><\/tr>
transition-timing-function(ease-out)<\/td>cubic-bezier(0,0,0.58,1)<\/td><\/tr>
transition-timing-function(ease-in-out)<\/td>cubic-bezier(0.42,0,0.58,1)<\/td><\/tr>
transition-timing-function(linear)<\/td>cubic-bezier(0,0,1,1)<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\u261e \u7bc4\u4f8b<\/h3>\n\n\n\n
\/* css\u7bc4\u4f8b-transition-timing-function *\/\ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  transition: width 2s;\n  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\n}<\/pre>\n\n\n\n
\/* css\u7bc4\u4f8b-animation-timing-function *\/\ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  transition: width 2s;\n  animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);\n}<\/pre>\n\n\n\n
\/*css\u7bc4\u4f8b-transition-timing-function \u7d50\u5408\u5716\u7247\u52d5\u614b*\/\ndiv {\n  transition(background 1s);\n  transition-timing-function(steps(13, end));\n  background: url(\"\u5716\u7247\u8def\u5f91\") left bottom no-repeat;\n}\ndiv:hover {\n  transition(background 1s);\n  transition-timing-function(steps(13, end));\n  background: url(\"\u5716\u7247\u8def\u5f91\") left bottom no-repeat;\n  background-position: right bottom;\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\u4e09\u6b21\u8c9d\u8cfd\u723e\u66f2\u7dda (Cubic Bezier curve) \u21e2 cubic-bezier() \u7531P0\u3001P1\u3001P2...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,53,4],"tags":[],"class_list":["post-6352","post","type-post","status-publish","format-standard","hentry","category-css","category-css-functions","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6352","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=6352"}],"version-history":[{"count":74,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6352\/revisions"}],"predecessor-version":[{"id":7050,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6352\/revisions\/7050"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=6352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=6352"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=6352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}