{"id":289,"date":"2018-02-16T13:36:09","date_gmt":"2018-02-16T04:36:09","guid":{"rendered":"http:\/\/onocom.net\/code\/?p=289"},"modified":"2018-02-16T13:49:22","modified_gmt":"2018-02-16T04:49:22","slug":"animate-css-use-in-before-after","status":"publish","type":"post","link":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/","title":{"rendered":"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"

Animate.css<\/a>\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u524d\u63d0\u3067\u3001before\u7591\u4f3c\u8981\u7d20\u3084after\u7591\u4f3c\u8981\u7d20\u304b\u3089Animate.css\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u547c\u3073\u51fa\u3059\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n

animation: bounce 3s ease infinite;<\/p>\n

\u306e\u8a18\u8ff0\u306e\u3046\u3061\u300cbounce\u300d\u90e8\u5206\u3092Animate.css\u306e\u6307\u5b9a\u306b\u5408\u308f\u305b\u3066\u66f8\u304d\u63db\u3048\u308b\u3053\u3068\u3067\u52d5\u4f5c\u3057\u307e\u3059\uff08\u6307\u5b9a\u3067\u304d\u308b\u5024\u306f\u4ee5\u4e0b\u53c2\u7167\uff09\u3002<\/p>\n

\u3082\u3063\u3068\u30b9\u30de\u30fc\u30c8\u306a\u65b9\u6cd5\u304c\u3042\u308b\u306e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n

Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u8868<\/h3>\n

Attention Seekers<\/h4>\n

bounce
\nflash
\npulse
\nrubberBand
\nshake
\nswing
\ntada
\nwobble
\njello<\/p>\n

Bouncing Entrances<\/h4>\n

bounceIn
\nbounceInDown
\nbounceInLeft
\nbounceInRight
\nbounceInUp<\/p>\n

Bouncing Exits<\/h4>\n

bounceOut
\nbounceOutDown
\nbounceOutLeft
\nbounceOutRight
\nbounceOutUp<\/p>\n

Fading Entrances<\/h4>\n

fadeIn
\nfadeInDown
\nfadeInDownBig
\nfadeInLeft
\nfadeInLeftBig
\nfadeInRight
\nfadeInRightBig
\nfadeInUp
\nfadeInUpBig<\/p>\n

Fading Exits<\/h4>\n

fadeOut
\nfadeOutDown
\nfadeOutDownBig
\nfadeOutLeft
\nfadeOutLeftBig
\nfadeOutRight
\nfadeOutRightBig
\nfadeOutUp
\nfadeOutUpBig<\/p>\n

Flippers<\/h4>\n

flip
\nflipInX
\nflipInY
\nflipOutX
\nflipOutY<\/p>\n

Lightspeed<\/h4>\n

lightSpeedIn
\nlightSpeedOut<\/p>\n

Rotating Entrances<\/h4>\n

rotateIn
\nrotateInDownLeft
\nrotateInDownRight
\nrotateInUpLeft
\nrotateInUpRight<\/p>\n

Rotating Exits<\/h4>\n

rotateOut
\nrotateOutDownLeft
\nrotateOutDownRight
\nrotateOutUpLeft
\nrotateOutUpRight<\/p>\n

Sliding Entrances<\/h4>\n

slideInUp
\nslideInDown
\nslideInLeft
\nslideInRight<\/p>\n

Sliding Exits<\/h4>\n

slideOutUp
\nslideOutDown
\nslideOutLeft
\nslideOutRight<\/p>\n

Zoom Entrances<\/h4>\n

zoomIn
\nzoomInDown
\nzoomInLeft
\nzoomInRight
\nzoomInUp<\/p>\n

Zoom Exits<\/h4>\n

zoomOut
\nzoomOutDown
\nzoomOutLeft
\nzoomOutRight
\nzoomOutUp<\/p>\n

Specials<\/h4>\n

hinge
\njackInTheBox
\nrollIn
\nrollOut<\/p>\n","protected":false},"excerpt":{"rendered":"

Animate.css\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u524d\u63d0\u3067\u3001before\u7591\u4f3c\u8981\u7d20\u3084after\u7591\u4f3c\u8981\u7d20\u304b\u3089Animate.css\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u547c\u3073\u51fa\u3059\u65b9\u6cd5\u3067\u3059\u3002 animation: bounce 3s ease infinite […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[2,3],"tags":[54,53,52],"jetpack_publicize_connections":[],"yoast_head":"\n[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5 - onocom.code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5 - onocom.code\" \/>\n<meta property=\"og:description\" content=\"Animate.css\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u524d\u63d0\u3067\u3001before\u7591\u4f3c\u8981\u7d20\u3084after\u7591\u4f3c\u8981\u7d20\u304b\u3089Animate.css\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u547c\u3073\u51fa\u3059\u65b9\u6cd5\u3067\u3059\u3002 animation: bounce 3s ease infinite […]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/\" \/>\n<meta property=\"og:site_name\" content=\"onocom.code\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/onocomnet\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-16T04:36:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-02-16T04:49:22+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/onocom.net\/code\/wp-content\/uploads\/2017\/09\/99d74b90a9093ad3b6b0406f9bc8d2d1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"takashi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@onocom\" \/>\n<meta name=\"twitter:site\" content=\"@onocom\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"takashi\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/\"},\"author\":{\"name\":\"takashi\",\"@id\":\"http:\/\/onocom.net\/code\/#\/schema\/person\/61d81f1f3c108f140d0722ad925d92fd\"},\"headline\":\"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5\",\"datePublished\":\"2018-02-16T04:36:09+00:00\",\"dateModified\":\"2018-02-16T04:49:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/\"},\"wordCount\":124,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/onocom.net\/code\/#organization\"},\"keywords\":[\":after\",\":before\",\"Animate.css\"],\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/\",\"url\":\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/\",\"name\":\"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5 - onocom.code\",\"isPartOf\":{\"@id\":\"http:\/\/onocom.net\/code\/#website\"},\"datePublished\":\"2018-02-16T04:36:09+00:00\",\"dateModified\":\"2018-02-16T04:49:22+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"http:\/\/onocom.net\/code\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/onocom.net\/code\/#website\",\"url\":\"http:\/\/onocom.net\/code\/\",\"name\":\"onocom.code\",\"description\":\"Code Snippets : WordPress JavasScript PHP\",\"publisher\":{\"@id\":\"http:\/\/onocom.net\/code\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/onocom.net\/code\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/onocom.net\/code\/#organization\",\"name\":\"onocom.code\",\"url\":\"http:\/\/onocom.net\/code\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"http:\/\/onocom.net\/code\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/onocom.net\/code\/wp-content\/uploads\/2017\/08\/logo.png\",\"contentUrl\":\"http:\/\/onocom.net\/code\/wp-content\/uploads\/2017\/08\/logo.png\",\"width\":442,\"height\":78,\"caption\":\"onocom.code\"},\"image\":{\"@id\":\"http:\/\/onocom.net\/code\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/onocomnet\/\",\"https:\/\/twitter.com\/onocom\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/onocom.net\/code\/#\/schema\/person\/61d81f1f3c108f140d0722ad925d92fd\",\"name\":\"takashi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"http:\/\/onocom.net\/code\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/0.gravatar.com\/avatar\/00559abef4a1b76cbbe87a22fb4250ff?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/0.gravatar.com\/avatar\/00559abef4a1b76cbbe87a22fb4250ff?s=96&d=mm&r=g\",\"caption\":\"takashi\"},\"url\":\"http:\/\/onocom.net\/code\/author\/takashi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5 - onocom.code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/","og_locale":"ja_JP","og_type":"article","og_title":"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5 - onocom.code","og_description":"Animate.css\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u524d\u63d0\u3067\u3001before\u7591\u4f3c\u8981\u7d20\u3084after\u7591\u4f3c\u8981\u7d20\u304b\u3089Animate.css\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u547c\u3073\u51fa\u3059\u65b9\u6cd5\u3067\u3059\u3002 animation: bounce 3s ease infinite […]","og_url":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/","og_site_name":"onocom.code","article_publisher":"https:\/\/www.facebook.com\/onocomnet\/","article_published_time":"2018-02-16T04:36:09+00:00","article_modified_time":"2018-02-16T04:49:22+00:00","og_image":[{"width":3000,"height":1000,"url":"http:\/\/onocom.net\/code\/wp-content\/uploads\/2017\/09\/99d74b90a9093ad3b6b0406f9bc8d2d1.png","type":"image\/png"}],"author":"takashi","twitter_card":"summary_large_image","twitter_creator":"@onocom","twitter_site":"@onocom","twitter_misc":{"\u57f7\u7b46\u8005":"takashi","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"1\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#article","isPartOf":{"@id":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/"},"author":{"name":"takashi","@id":"http:\/\/onocom.net\/code\/#\/schema\/person\/61d81f1f3c108f140d0722ad925d92fd"},"headline":"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5","datePublished":"2018-02-16T04:36:09+00:00","dateModified":"2018-02-16T04:49:22+00:00","mainEntityOfPage":{"@id":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/"},"wordCount":124,"commentCount":0,"publisher":{"@id":"http:\/\/onocom.net\/code\/#organization"},"keywords":[":after",":before","Animate.css"],"articleSection":["CSS","HTML"],"inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/","url":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/","name":"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5 - onocom.code","isPartOf":{"@id":"http:\/\/onocom.net\/code\/#website"},"datePublished":"2018-02-16T04:36:09+00:00","dateModified":"2018-02-16T04:49:22+00:00","breadcrumb":{"@id":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/onocom.net\/code\/animate-css-use-in-before-after\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"http:\/\/onocom.net\/code\/"},{"@type":"ListItem","position":2,"name":"[CSS] Animate.css\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u4e00\u89a7\u3068Animate.css\u3092before\u3084after\u304b\u3089\u5229\u7528\u3059\u308b\u65b9\u6cd5"}]},{"@type":"WebSite","@id":"http:\/\/onocom.net\/code\/#website","url":"http:\/\/onocom.net\/code\/","name":"onocom.code","description":"Code Snippets : WordPress JavasScript PHP","publisher":{"@id":"http:\/\/onocom.net\/code\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/onocom.net\/code\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ja"},{"@type":"Organization","@id":"http:\/\/onocom.net\/code\/#organization","name":"onocom.code","url":"http:\/\/onocom.net\/code\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"http:\/\/onocom.net\/code\/#\/schema\/logo\/image\/","url":"http:\/\/onocom.net\/code\/wp-content\/uploads\/2017\/08\/logo.png","contentUrl":"http:\/\/onocom.net\/code\/wp-content\/uploads\/2017\/08\/logo.png","width":442,"height":78,"caption":"onocom.code"},"image":{"@id":"http:\/\/onocom.net\/code\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/onocomnet\/","https:\/\/twitter.com\/onocom"]},{"@type":"Person","@id":"http:\/\/onocom.net\/code\/#\/schema\/person\/61d81f1f3c108f140d0722ad925d92fd","name":"takashi","image":{"@type":"ImageObject","inLanguage":"ja","@id":"http:\/\/onocom.net\/code\/#\/schema\/person\/image\/","url":"http:\/\/0.gravatar.com\/avatar\/00559abef4a1b76cbbe87a22fb4250ff?s=96&d=mm&r=g","contentUrl":"http:\/\/0.gravatar.com\/avatar\/00559abef4a1b76cbbe87a22fb4250ff?s=96&d=mm&r=g","caption":"takashi"},"url":"http:\/\/onocom.net\/code\/author\/takashi\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p92bwE-4F","_links":{"self":[{"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/posts\/289"}],"collection":[{"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/comments?post=289"}],"version-history":[{"count":6,"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":295,"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/posts\/289\/revisions\/295"}],"wp:attachment":[{"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/media?parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/categories?post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/onocom.net\/code\/wp-json\/wp\/v2\/tags?post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}