{"id":1405,"date":"2019-09-27T18:59:32","date_gmt":"2019-09-27T10:59:32","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1405"},"modified":"2022-04-18T17:42:15","modified_gmt":"2022-04-18T09:42:15","slug":"css-animations","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/27\/css-animations\/","title":{"rendered":"CSS Animations \u52d5\u756b"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">\u5c6c\u6027\u4ecb\u7d39<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>@keyframes<\/strong><\/td><td>\u5b9a\u7fa9\u52d5\u756b<\/td><\/tr><tr><td><strong>animation-name<\/strong><\/td><td>\u5b9a\u7fa9\u95dc\u9375\u5f71\u683c @keyframes \u7684\u540d\u5b57\u3002<\/td><\/tr><tr><td><strong>animation-duration<\/strong><\/td><td>\u5b9a\u7fa9\u52d5\u756b\u64ad\u653e\u5b8c\u7562\u53cd\u5411\u64ad\u653e\u3002<\/td><\/tr><tr><td><strong>animation-delay<\/strong><\/td><td>\u5b9a\u7fa9\u52d5\u756b\u64ad\u653e\u524d\u9593\u9694\u6642\u9593\u3002<\/td><\/tr><tr><td><strong>animation-iteration-count<\/strong><\/td><td>\u5b9a\u7fa9\u52d5\u756b\u91cd\u8907\u7684\u6b21\u6578\u3002<br>infinite \u6c38\u9060\u91cd\u8907\u64ad\u653e\u3002<\/td><\/tr><tr><td><strong>animation-direction<\/strong><\/td><td>\u5b9a\u7fa9\u52d5\u756b\u64ad\u653e\u65b9\u5f0f\u3002<\/td><\/tr><tr><td><strong>animation-timing-function<\/strong><\/td><td>\u5b9a\u7fa9\u52d5\u756b\u8f49\u8b8a\u6642\u6642\u9593\u7684\u52a0\u901f\u66f2\u7dda (\u4f8b\u5982 linear)\u3002<\/td><\/tr><tr><td><strong>animation-fill-mode<\/strong><\/td><td>\u5b9a\u7fa9\u5143\u7d20\u5728\u52d5\u756b\u64ad\u653e\u5916(\u52d5\u756b\u958b\u59cb\u524d\u53ca\u7d50\u675f\u5f8c)\u7684\u72c0\u614b\u3002<\/td><\/tr><tr><td><strong>animation<\/strong><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">@keyframes<\/h3>\n\n\n\n<p>from{} to {} <br>\u5b9a\u7fa9\u52d5\u756b\u958b\u59cb\u5230\u7d50\u675f<br>ps. animation-duration\u5c6c\u6027\u5b9a\u7fa9\u52d5\u756b\u64ad\u653e\u6642\u9593\u3002 \u672a\u6307\u5b9aanimation-duration\u5c6c\u6027\u5247\u4e0d\u6703\u767c\u751f\u52d5\u756b\uff0c\u9ed8\u8a8d\u503c\u70ba0s (0\u79d2)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*css\u7bc4\u4f8b-\u81ea\u52d5\u64ad\u653e4\u79d2\u9418\u52d5\u756b(\u4e00\u6b21\u6027\u52d5\u756b)*\/\ndiv {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  -webkit-animation-name: example; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-duration: 4s; \/* Safari 4.0 - 8.0 *\/\n  animation-name: example;\n  animation-duration: 4s;\n}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes example {\n  from {background-color: red;}\n  to {background-color: yellow;}\n}\n\n\/* Standard syntax *\/\n@keyframes example {\n  from {background-color: red;}\n  to {background-color: yellow;}\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>0%{} 25%{} 50%{} 100%{}<br>\u589e\u52a0\u52d5\u756b\u95dc\u9375\u5f71\u683c<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*css\u7bc4\u4f8b-\u81ea\u52d5\u64ad\u653e4\u79d2\u9418\u52d5\u756b(\u4e00\u6b21\u6027\u52d5\u756b)*\/\n\ndiv {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  -webkit-animation-name: example; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-duration: 4s; \/* Safari 4.0 - 8.0 *\/\n  animation-name: example;\n  animation-duration: 4s;\n}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes example {\n  0%   {background-color: red;}\n  25%  {background-color: yellow;}\n  50%  {background-color: blue;}\n  100% {background-color: green;}\n}\n\n\/* Standard syntax *\/\n@keyframes example {\n  0%   {background-color: red;}\n  25%  {background-color: yellow;}\n  50%  {background-color: blue;}\n  100% {background-color: green;}\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>\u984f\u8272\u6f38\u8b8a\u52d5\u756b+\u4f4d\u79fb<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  position: relative;\n  -webkit-animation-name: example; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-duration: 4s; \/* Safari 4.0 - 8.0 *\/\n  animation-name: example;\n  animation-duration: 4s;\n}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}\n\n\/* Standard syntax *\/\n@keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>animation-delay<\/strong><\/h3>\n\n\n\n<p>\u52d5\u756b\u64ad\u653e\u9593\u95a3\u6642\u9593<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  position: relative;\n  -webkit-animation-name: example; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-duration: 4s; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-delay: 2s; \/* Safari 4.0 - 8.0 *\/\n  animation-name: example;\n  animation-duration: 4s;\n  animation-delay: 2s;\n}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}\n\n\/* Standard syntax *\/\n@keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">animation-iteration-count<\/h3>\n\n\n\n<p>\u8a2d\u5b9a\u52d5\u756b\u64ad\u653e\u6b21\u6578 (infinite \u7121\u9650\u5faa\u74b0)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  position: relative;\n  -webkit-animation-name: example; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-duration: 4s; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-iteration-count: 3; \/* Safari 4.0 - 8.0 *\/\n  animation-name: example;\n  animation-duration: 4s;\n  animation-iteration-count: 3; \/*\u5faa\u74b0\u64ad\u653einfinite;*\/\n\n}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}\n\n\/* Standard syntax *\/\n@keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>animation-direction <\/strong><\/h3>\n\n\n\n<p>\u52d5\u756b\u64ad\u653e\u65b9\u5f0f<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>normal<\/strong><\/td><td>\u9810\u8a2d\u503c\uff0c\u52d5\u756b\u5411\u524d\u64ad\u653e<br>-webkit-animation-direction: normal;<br>animation-direction: normal; <\/td><\/tr><tr><td><strong>reverse<\/strong><\/td><td>\u52d5\u756b\u5411\u5f8c\u64ad\u653e<br>-webkit-animation-direction: reverse;<br>animation-direction: reverse; <\/td><\/tr><tr><td><strong>alternate<\/strong><\/td><td>\u52d5\u756b\u5148\u5411\u524d\u64ad\u653e\uff0c\u518d\u5f80\u5f8c\u64ad\u653e<br>-webkit-animation-direction: alternate;<br>animation-direction: alternate; <\/td><\/tr><tr><td><strong>alternate-reverse<\/strong><\/td><td>\u52d5\u756b\u5148\u5411\u5f8c\u64ad\u653e\uff0c\u518d\u5f80\u524d\u64ad\u653e<br>-webkit-animation-direction: alternate-reverse;<br>animation-direction: alternate-reverse; <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  position: relative;\n  -webkit-animation-name: example; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-duration: 4s; \/* Safari 4.0 - 8.0 *\/\n  -webkit-animation-direction: reverse; \/* Safari 4.0 - 8.0 *\/\n  animation-name: example;\n  animation-duration: 4s;\n  animation-direction: reverse;  \n}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}\n\n\/* Standard syntax *\/\n@keyframes example {\n  0%   {background-color:red; left:0px; top:0px;}\n  25%  {background-color:yellow; left:200px; top:0px;}\n  50%  {background-color:blue; left:200px; top:200px;}\n  75%  {background-color:green; left:0px; top:200px;}\n  100% {background-color:red; left:0px; top:0px;}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">animation-timing-function<\/h3>\n\n\n\n<p> \u8a2d\u5b9a\u52d5\u756b\u901f\u5ea6<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>ease<\/strong><\/td><td>\u7de9\u6162&gt;\u5feb\u901f&gt;\u7de9\u6162<\/td><\/tr><tr><td><strong>rlinear<\/strong><\/td><td>\u52d5\u756b\u958b\u59cb\u5230\u7d50\u675f\u901f\u5ea6\u4e0d\u8b8a<\/td><\/tr><tr><td><strong>ease-in<\/strong><\/td><td>\u52d5\u756b\u7de9\u6162\u6de1\u5165<\/td><\/tr><tr><td><strong>ease-out<\/strong><\/td><td>\u52d5\u756b\u7de9\u6162\u6de1\u51fa<\/td><\/tr><tr><td><strong>ease-in-out<\/strong><\/td><td>\u52d5\u756b\u958b\u59cb\u5230\u7d50\u675f\u901f\u5ea6\u7de9\u6162<\/td><\/tr><tr><td><strong>cubic-bezier(n,n,n,n)<\/strong><\/td><td>\u81ea\u5b9a\u4e09\u6b21\u52d5\u756b\u901f\u5ea6<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 100px;\n  height: 50px;\n  background-color: red;\n  font-weight: bold;\n  position: relative;\n  -webkit-animation: mymove 5s infinite; \/* Safari 4.0 - 8.0 *\/\n  animation: mymove 5s infinite;\n}\n\n\/* Safari 4.0 - 8.0 *\/\n#div1 {-webkit-animation-timing-function: linear;}\n#div2 {-webkit-animation-timing-function: ease;}\n#div3 {-webkit-animation-timing-function: ease-in;}\n#div4 {-webkit-animation-timing-function: ease-out;}\n#div5 {-webkit-animation-timing-function: ease-in-out;}\n\n\/* Standard syntax *\/\n#div1 {animation-timing-function: linear;}\n#div2 {animation-timing-function: ease;}\n#div3 {animation-timing-function: ease-in;}\n#div4 {animation-timing-function: ease-out;}\n#div5 {animation-timing-function: ease-in-out;}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes mymove {\n  from {left: 0px;}\n  to {left: 300px;}\n}\n\n\/* Standard syntax *\/\n@keyframes mymove {\n  from {left: 0px;}\n  to {left: 300px;}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>animation-fill-mode <\/strong><\/h3>\n\n\n\n<p><strong>\u8a2d\u5b9a\u52d5\u756b\u901f\u5ea6<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>none<\/strong><\/td><td>\u9810\u8a2d\u503c<\/td><\/tr><tr><td><strong>forwards<\/strong><\/td><td>\u52d5\u756b\u958b\u59cb\u5230\u7d50\u675f\u901f\u5ea6\u4e0d\u8b8a<\/td><\/tr><tr><td><strong>backwards<\/strong><\/td><td>\u52d5\u756b\u7de9\u6162\u6de1\u5165<\/td><\/tr><tr><td><strong>both<\/strong><\/td><td>\u52d5\u756b\u7de9\u6162\u6de1\u51fa<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 100px;\n  height: 50px;\n  background-color: red;\n  font-weight: bold;\n  position: relative;\n  -webkit-animation: mymove 5s infinite; \/* Safari 4.0 - 8.0 *\/\n  animation: mymove 5s infinite;\n}\n\n\/* Safari 4.0 - 8.0 *\/\n#div1 {-webkit-animation-timing-function: linear;}\n#div2 {-webkit-animation-timing-function: ease;}\n#div3 {-webkit-animation-timing-function: ease-in;}\n#div4 {-webkit-animation-timing-function: ease-out;}\n#div5 {-webkit-animation-timing-function: ease-in-out;}\n\n\/* Standard syntax *\/\n#div1 {animation-timing-function: linear;}\n#div2 {animation-timing-function: ease;}\n#div3 {animation-timing-function: ease-in;}\n#div4 {animation-timing-function: ease-out;}\n#div5 {animation-timing-function: ease-in-out;}\n\n\/* Safari 4.0 - 8.0 *\/\n@-webkit-keyframes mymove {\n  from {left: 0px;}\n  to {left: 300px;}\n}\n\n\/* Standard syntax *\/\n@keyframes mymove {\n  from {left: 0px;}\n  to {left: 300px;}\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Animate.css\u5957\u4ef6<\/h2>\n\n\n\n<p><a href=\"https:\/\/daneden.github.io\/animate.css\/\">https:\/\/daneden.github.io\/animate.css\/<\/a><br>class=&#8221;\u52d5\u756b \u52d5\u756b\u985e\u5225 \u64ad\u653e\u65b9\u5f0f&#8221;  \u4f8b : class=&#8221;animated bounce infinite&#8221;<br><br><a href=\"http:\/\/jilin.hydesign.tw\/index.php\/2020\/12\/15\/css-animate-css\/\">Animate.css \u8a73\u7d30\u4f7f\u7528<\/a><br><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--html\u7bc4\u4f8b-->\n\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/3.5.2\/animate.min.css\"\/>\n\n&lt;h2 class=\"animated infinite bounce\"> Hello World! &lt;\/h2><\/pre>\n\n\n\n<p>CSS \u5b9a\u683c\u52d5\u756b<br><a href=\"https:\/\/yachen168.github.io\/article\/%E7%94%A8%E7%B4%94CSS%E5%81%9A%E5%AE%9A%E6%A0%BC%E5%8B%95%E7%95%AB.html\">https:\/\/yachen168.github.io\/article\/%E7%94%A8%E7%B4%94CSS%E5%81%9A%E5%AE%9A%E6%A0%BC%E5%8B%95%E7%95%AB.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5c6c\u6027\u4ecb\u7d39 @keyframes \u5b9a\u7fa9\u52d5\u756b animation-name \u5b9a\u7fa9\u95dc\u9375\u5f71\u683c @keyframes \u7684&#46;&#46;&#46;<\/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-1405","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\/1405","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=1405"}],"version-history":[{"count":62,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1405\/revisions"}],"predecessor-version":[{"id":7383,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1405\/revisions\/7383"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1405"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}