{"id":314,"date":"2011-01-10T05:14:55","date_gmt":"2011-01-09T20:14:55","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=314"},"modified":"2012-02-10T02:11:57","modified_gmt":"2012-02-09T17:11:57","slug":"css3-%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3-fadein-fadeout","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=314","title":{"rendered":"CSS3 \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 Animations \u30e2\u30b8\u30e5\u30fc\u30eb FadeIn FadeOut\u4f5c\u6210"},"content":{"rendered":"<h4><strong>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u00a0\uff08Animations \u30e2\u30b8\u30e5\u30fc\u30eb\uff09<\/strong><\/h4>\n<div id=\"_mcePaste\" style=\"margin-top: 2em;\">@-webkit-keyframes\u3092\u4f7f\u3044\u3001\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3001\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3092\u4f5c\u308a\u307e\u3059\u3002<\/div>\n<div style=\"margin-top: 1em;\">@-webkit-keyframes\u306f%\u3067\u6642\u9593\u8ef8\u306e\u6307\u5b9a\u304c\u51fa\u6765\u307e\u3059\u3002<\/div>\n<div style=\"margin-top: 1em;\">0%\u304c\u30b9\u30bf\u30fc\u30c8\u3001100%\u3067\u7d42\u4e86\u3068\u306a\u308a\u307e\u3059\u3002<\/div>\n<div style=\"margin-top: 1em;\"><strong>fadeIn<\/strong><\/div>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n@-webkit-keyframes 'fadeIn' {\r\n0% {\r\nopacity:0;\r\n}\r\n100% {\r\nopacity:1;\r\n}\r\n}\r\n<\/pre>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\u30bb\u30ec\u30af\u30bf .fadeIn {\r\n-webkit-animation-name: 'fadeIn';\r\n-webkit-animation-duration: 1s;\r\n-webkit-animation-timing-function: ease-in;\r\n-webkit-animation-iteration-count: 1;\r\n}\r\n<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><strong>\u3010animation-name\u3011<\/strong><span style=\"font-family: Times; line-height: normal; font-size: small;\"><strong>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u540d\u3092\u6307\u5b9a\u3059\u308b<\/strong><\/span><\/p>\n<p style=\"margin-top: 1em;\"><span style=\"font-size: 14px;\">\u5024\uff1anone,\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u540d<\/span><\/p>\n<p style=\"margin-top: 1em;\"><strong>\u3010animation-duration\u3011<\/strong><span style=\"font-family: Times; line-height: normal; font-size: small;\"><strong>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4e00\u56de\u5206\u306e\u6642\u9593\u306e\u9577\u3055\u3092\u6307\u5b9a\u3059\u308b<\/strong><\/span><\/p>\n<p style=\"margin-top: 1em;\"><span style=\"font-family: Times; line-height: normal; font-size: small;\"><span style=\"font-size: 14px;\">\u5024\uff1atime<span style=\"font-family: Courier;\">\uff08\u6642\u9593\u6307\u5b9a\u3000\uff15\u79d2\u306a\u3089 5s\uff09<\/span><\/span><\/span><\/p>\n<p style=\"margin-top: 1em;\"><span style=\"font-family: Times; line-height: normal; font-size: small;\"><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;\"><strong>\u3010animation-time-function\u3011<\/strong><\/span><\/span><span style=\"font-family: Times; line-height: normal; font-size: small;\"><strong>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u30fb\u9032\u884c\u5272\u5408\u3092\u6307\u5b9a\u3059\u308b<\/strong><\/span><\/p>\n<p style=\"margin-top: 1em;\"><span style=\"font-family: Times; line-height: normal; font-size: 14px;\">\u5024\uff1a<\/span>ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(\u6570\u5024, \u6570\u5024, \u6570\u5024, \u6570\u5024)<\/p>\n<p style=\"margin-top: 1em;\"><span style=\"font-family: Times; line-height: normal; font-size: small;\"><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;\"><span style=\"font-family: Times; line-height: normal; font-size: small;\"><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;\"><span style=\"font-family: Times; line-height: normal; font-size: small;\"><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;\"><strong>\u3010animation-iteration-count\u3011<\/strong><\/span><\/span><\/span><\/span><\/span><\/span><span style=\"font-family: Times; line-height: normal; font-size: small;\"><strong>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7e70\u308a\u8fd4\u3057\u56de\u6570\u3092\u6307\u5b9a\u3059\u308b<\/strong><\/span><\/p>\n<p style=\"margin-top: 1em;\"><span style=\"font-family: Times; line-height: normal; font-size: small;\"><span style=\"font-size: 14px;\">\u5024\uff1a<\/span><\/span>infinite(<span style=\"font-family: Times; line-height: 21px; font-size: 14px;\">\u7121\u9650\u306b\u518d\u751f\u3092\u7e70\u308a\u8fd4\u3059), <\/span>\u6570\u5024(<span style=\"font-family: Times; line-height: 21px; font-size: 14px;\">\u6570\u5024\u3067\u518d\u751f\u56de\u6570\u3092\u6307\u5b9a)<\/span><\/p>\n<p style=\"margin-top: 1em;\"><span style=\"font-family: Times;\"><span class=\"Apple-style-span\" style=\"font-size: 14px; line-height: 21px;\"><br \/>\n <\/span><\/span><\/p>\n<div id=\"_mcePaste\" style=\"margin-top: 1em;\"><strong>fadeOut<\/strong><\/div>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n@-webkit-keyframes 'fadeOut' {\r\n0% {\r\nopacity:1;\r\n}\r\n100% {\r\nopacity:0;\r\n}\r\n}\r\n<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><span class=\"Apple-style-span\" style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px; white-space: normal;\">\u00a0<\/span><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\u30bb\u30ec\u30af\u30bf .fadeOut {\r\n-webkit-animation-name: 'fadeOut';\r\n-webkit-animation-duration: 1s;\r\n-webkit-animation-timing-function: ease-in;\r\n-webkit-animation-iteration-count: 1;\r\nopacity:0;\r\n}\r\n<\/pre>\n<\/p>\n<h4>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30c7\u30e2<\/h4>\n<p class=\"animeTest\" style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/logo_b.gif\" alt=\"\" title=\"logo_b\" width=\"170\" height=\"52\" class=\"align none size-full wp-image-2018\" \/><\/p>\n<style type=\"text\/css\">@-webkit-keyframes anime{10% {opacity: 0.5;-webkit-transform: translate(2px);}20% {opacity: 1;}30% {opacity: 0.5;-webkit-transform: translate(-2px);}40% {opacity: 1;}50% {opacity: 0.5;-webkit-transform: translate(2px);}60% {opacity: 1;}70% {opacity: 0.5;-webkit-transform: translate(-2px);}80% {opacity: 1;}90% {opacity: 0.5;-webkit-transform: translate(2px);}}.animeTest {text-align:center;-webkit-animation-name: 'anime';-webkit-animation-duration: 1s;-webkit-animation-iteration-count: infinite;}<\/style>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">@-webkit-keyframes anime{\r\n10% {opacity: 0.5;-webkit-transform: translate(2px);}\r\n20% {opacity: 1;}\r\n30% {opacity: 0.5;-webkit-transform: translate(-2px);}\r\n40% {opacity: 1;}\r\n50% {opacity: 0.5;-webkit-transform: translate(2px);}\r\n60% {opacity: 1;}\r\n70% {opacity: 0.5;-webkit-transform: translate(-2px);}\r\n80% {opacity: 1;}\r\n90% {opacity: 0.5;-webkit-transform: translate(2px);}\r\n}\r\n.animeTest {\r\n-webkit-animation-name: 'anime';\r\n-webkit-animation-duration: 1s;\r\n-webkit-animation-iteration-count: infinite;\r\n}<\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u00a0\uff08Animations \u30e2\u30b8\u30e5\u30fc\u30eb\uff09 @-webkit-keyframes\u3092\u4f7f\u3044\u3001\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3001\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3092\u4f5c\u308a\u307e\u3059\u3002 @-webkit-keyframes\u306f%\u3067\u6642\u9593\u8ef8\u306e\u6307\u5b9a\u304c\u51fa\u6765\u307e\u3059\u3002 0%\u304c\u30b9\u30bf\u30fc [&hellip;]<\/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,95],"class_list":["post-314","post","type-post","status-publish","format-standard","hentry","category-css3","tag-css3","tag-95"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/314","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=314"}],"version-history":[{"count":31,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/314\/revisions"}],"predecessor-version":[{"id":2921,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/314\/revisions\/2921"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}