{"id":1091,"date":"2024-08-19T13:40:17","date_gmt":"2024-08-19T04:40:17","guid":{"rendered":"https:\/\/route-zero.com\/recruit\/route\/1091\/"},"modified":"2025-06-13T14:29:15","modified_gmt":"2025-06-13T05:29:15","slug":"1091","status":"publish","type":"route","link":"https:\/\/route-zero.com\/recruit\/route\/1091\/","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011Web\u5236\u4f5c\u3067\u4f7f\u3048\u308bCSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f310\u9078\uff5c\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\uff06\u4f7f\u3044\u65b9\u89e3\u8aac"},"content":{"rendered":"<div>\n<div id=\"js-contents\" class=\"p-tableOfContents\">\n<p class=\"p-tableOfContents__title\">\u76ee\u6b21<\/p>\n<ul>\n<li class=\"p-tableOfContents__links\">\n<a href=\"#sec-intro\" class=\"js-link\">\u306f\u3058\u3081\u306b<\/a>\n<\/li>\n<li class=\"p-tableOfContents__links\">\n<a href=\"#sec-structure\" class=\"js-link\">\u672c\u8a18\u4e8b\u306e\u69cb\u6210<\/a>\n<\/li>\n<li class=\"p-tableOfContents__links\">\n<a href=\"#sec-approach10\" class=\"js-link\">10\u306e\u30e6\u30cb\u30fc\u30af\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u5fb9\u5e95\u89e3\u8aac<\/a><\/p>\n<ul>\n<li><a href=\"#sec-bounce\" class=\"js-link\">3-1. \u30d0\u30a6\u30f3\u30c9\uff08bounce\uff09<\/a><\/li>\n<li><a href=\"#sec-rotate\" class=\"js-link\">3-2. \u56de\u8ee2\uff08rotate\uff09<\/a><\/li>\n<li><a href=\"#sec-scale\" class=\"js-link\">3-3. \u62e1\u5927\u7e2e\u5c0f\uff08scale\uff09<\/a><\/li>\n<li><a href=\"#sec-slideIn\" class=\"js-link\">3-4. \u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\uff08slideIn\uff09<\/a><\/li>\n<li><a href=\"#sec-fadeIn\" class=\"js-link\">3-5. \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\uff08fadeIn\uff09<\/a><\/li>\n<li><a href=\"#sec-flipX\" class=\"js-link\">3-6. \u6a2a\u56de\u8ee2\uff08flipX\uff09<\/a><\/li>\n<li><a href=\"#sec-flipY\" class=\"js-link\">3-7. \u7e26\u56de\u8ee2\uff08flipY\uff09<\/a><\/li>\n<li><a href=\"#sec-swing\" class=\"js-link\">3-8. \u30b9\u30a4\u30f3\u30b0\uff08swing\uff09<\/a><\/li>\n<li><a href=\"#sec-wobble\" class=\"js-link\">3-9. \u30a6\u30a9\u30d6\u30eb\uff08wobble\uff09<\/a><\/li>\n<li><a href=\"#sec-tada\" class=\"js-link\">3-10. \u30bf\u30c0\uff08tada\uff09<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"p-tableOfContents__links\">\n<a href=\"#sec-custom\" class=\"js-link\">4. \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3084\u5fdc\u7528\u306e\u30d2\u30f3\u30c8<\/a>\n<\/li>\n<li class=\"p-tableOfContents__links\">\n<a href=\"#sec-sample\" class=\"js-link\">5. HTML\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u5b9f\u8df5<\/a>\n<\/li>\n<li class=\"p-tableOfContents__links\">\n<a href=\"#sec-conclusion\" class=\"js-link\">6. \u307e\u3068\u3081\u3068\u6b21\u306e\u30b9\u30c6\u30c3\u30d7<\/a>\n<\/li>\n<\/ul>\n<\/div>\n<h2 id=\"sec-intro\">\u306f\u3058\u3081\u306b<\/h2>\n<p>Web\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u52d5\u304d\u3092\u3064\u3051\u308b\u305f\u3081\u306b\u306f\u3001<strong>CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/strong>\u3068<strong>JavaScript<\/strong>\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u975e\u5e38\u306b\u6709\u7528\u3067\u3059\u3002CSS\u3060\u3051\u3067\u5b9f\u73fe\u3067\u304d\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u591a\u3044\u3082\u306e\u306e\u3001JavaScript\u3092\u52a0\u3048\u308b\u3053\u3068\u3067\u3001<strong>\u30e6\u30fc\u30b6\u30fc\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u5fdc\u3058\u305f\u52d5\u304d<\/strong>\u3084\u3001<strong>\u8907\u96d1\u306a\u6761\u4ef6\u5206\u5c90<\/strong>\u3092\u542b\u3080\u9ad8\u5ea6\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u305f\u3068\u3048\u3070\u3001\u30de\u30a6\u30b9\u30db\u30d0\u30fc\u6642\u306b\u56de\u8ee2\u3084\u62e1\u5927\u304c\u767a\u52d5\u3057\u305f\u308a\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u5f8c\u306b\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u56de\u8ee2\u3055\u305b\u305f\u308a\u306a\u3069\u3001<strong>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u6f14\u51fa<\/strong>\u3092\u81ea\u5728\u306b\u884c\u3048\u308b\u306e\u304c\u6700\u5927\u306e\u9b45\u529b\u3067\u3059\u3002\u5b9f\u969b\u3001\u521d\u3081\u3066\u89e6\u308c\u308b\u65b9\u306f\u300c\u3053\u308c\u307b\u3069\u81ea\u7531\u306b\u52d5\u304b\u305b\u308b\u306e\u304b\uff01\u300d\u3068\u9a5a\u304f\u3053\u3068\u3082\u591a\u3044\u306e\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n<p>\u3057\u304b\u3057\u3001\u5b9f\u969b\u306b\u3084\u3063\u3066\u307f\u308b\u3068\u3001\u300c\u4f55\u304b\u3089\u59cb\u3081\u308c\u3070\u3044\u3044\u306e\u304b\u300d\u300c@keyframes\u3063\u3066\u3069\u3046\u66f8\u3051\u3070\u3044\u3044\u306e\u304b\u300d\u304c\u5206\u304b\u3089\u305a\u3001\u3064\u307e\u305a\u304f\u3053\u3068\u3082\u3042\u308a\u307e\u3059\u3002\u305d\u3053\u3067\u672c\u8a18\u4e8b\u3067\u306f\u3001\u521d\u5fc3\u8005\u304b\u3089\u4e2d\u7d1a\u8005\u5411\u3051\u306b\u3001<strong>\u4f7f\u3044\u52dd\u624b\u304c\u826f\u304f\u5fdc\u7528\u7bc4\u56f2\u304c\u5e83\u304410\u7a2e\u985e\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u624b\u6cd5<\/strong>\u3092\u30d4\u30c3\u30af\u30a2\u30c3\u30d7\u3057\u307e\u3057\u305f\u3002<\/p>\n<hr>\n<h2 id=\"sec-structure\">\u672c\u8a18\u4e8b\u306e\u69cb\u6210<\/h2>\n<p>\u672c\u8a18\u4e8b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u65b9\u3092\u5bfe\u8c61\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li>\n<p><strong>HTML\/CSS\u306e\u57fa\u672c\u6587\u6cd5\u306f\u308f\u304b\u308b\u521d\u5fc3\u8005<\/strong><br \/>\u300c@keyframes\u306e\u66f8\u304d\u65b9\u306f\u306a\u3093\u3068\u306a\u304f\u77e5\u3063\u3066\u3044\u308b\u3051\u3069\u3001\u5b9f\u7528\u7684\u306a\u4f8b\u304c\u898b\u305f\u3044\u300d\u3068\u3044\u3046\u65b9\u306b\u6700\u9069\u3067\u3059\u3002<\/p>\n<\/li>\n<li>\n<p><strong>JavaScript\u3092\u3042\u308b\u7a0b\u5ea6\u4f7f\u3048\u308b\u304c\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b\u306e\u306b\u6163\u308c\u3066\u3044\u306a\u3044\u4e2d\u7d1a\u8005<\/strong><br \/>\u3088\u308a\u9ad8\u5ea6\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u53d6\u308a\u5165\u308c\u305f\u3044\u65b9\u306f\u3001\u3053\u3053\u3067\u7d39\u4ecb\u3059\u308b\u57fa\u672c\u5f62\u3092\u30d9\u30fc\u30b9\u306b\u65b0\u3057\u3044\u52d5\u304d\u3092\u4f5c\u308b\u30d2\u30f3\u30c8\u3092\u5f97\u3089\u308c\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<\/li>\n<li>\n<p><strong>Web\u30c7\u30b6\u30a4\u30ca\u30fc\u3084\u30c7\u30a3\u30ec\u30af\u30bf\u30fc<\/strong><br \/>\u30c7\u30b6\u30a4\u30f3\u3084\u6f14\u51fa\u306e\u5e45\u3092\u5e83\u3052\u305f\u3044\u304c\u3001\u30b3\u30fc\u30c9\u307e\u3067\u306f\u8a73\u3057\u304f\u306a\u3044\u2026\u3068\u3044\u3046\u65b9\u306b\u3082\u3001\u30b5\u30f3\u30d7\u30eb\u3092\u898b\u308b\u3060\u3051\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u30a4\u30e1\u30fc\u30b8\u3092\u628a\u63e1\u3067\u304d\u308b\u3088\u3046\u5de5\u592b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u300c\u521d\u5fc3\u8005\u3067\u3082\u3068\u306b\u304b\u304f\u52d5\u304d\u3092\u5165\u308c\u3066\u307f\u305f\u3044\u300d\u300c\u4e2d\u7d1a\u8005\u3060\u3051\u3069\u30d9\u30fc\u30b9\u306e\u30b3\u30fc\u30c9\u3092\u30d1\u30d1\u30c3\u3068\u898b\u8fd4\u3057\u305f\u3044\u300d\u3068\u3044\u3046\u65b9\u306f\u3001\u300c<strong>10\u306e\u30e6\u30cb\u30fc\u30af\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u5fb9\u5e95\u89e3\u8aac<\/strong>\u300d\u3001\u5f8c\u534a\u306b\u63b2\u8f09\u306e<strong>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/strong>\u3092\u5b9f\u969b\u306b\u30b3\u30d4\u30da\u3057\u3066\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<hr>\n<h2 id=\"sec-approach10\">10\u306e\u30e6\u30cb\u30fc\u30af\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u5fb9\u5e95\u89e3\u8aac<\/h2>\n<p>\u3053\u3053\u3067\u306f\u3001<strong>CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/strong>\u3068<strong>JavaScript<\/strong>\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u30a2\u30d7\u30ed\u30fc\u30c1\u4f8b\u3092\u53b3\u9078\u3057\u300110\u7a2e\u985e\u306b\u5206\u3051\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7279\u5fb4\u3068\u3068\u3082\u306b\u3001\u5b9f\u969b\u306e@keyframes\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u63b2\u8f09\u3057\u3066\u3044\u307e\u3059\u3002\u305c\u3072\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u30c4\u30fc\u30eb\u306a\u3069\u3067\u78ba\u8a8d\u3057\u306a\u304c\u3089\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<hr>\n<h3 id=\"sec-bounce\">3-1. \u30d0\u30a6\u30f3\u30c9\uff08bounce\uff09<\/h3>\n<p>\u307e\u305a\u306f\u975e\u5e38\u306b\u30aa\u30fc\u30bd\u30c9\u30c3\u30af\u30b9\u306a\u300c\u30d0\u30a6\u30f3\u30c9\u300d\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002\u8981\u7d20\u304c\u4e0a\u4e0b\u306b\u5f3e\u3080\u3088\u3046\u306b\u52d5\u4f5c\u3057\u3001\u8996\u899a\u7684\u306a\u6ce8\u76ee\u3092\u96c6\u3081\u308b\u306e\u306b\u5411\u3044\u3066\u3044\u307e\u3059\u3002\u4e3b\u306b\u30dc\u30bf\u30f3\u3084\u30a2\u30a4\u30b3\u30f3\u306a\u3069\u300c\u62bc\u3057\u3066\u307b\u3057\u3044\u300d\u8981\u7d20\u306b\u4f7f\u3046\u3068\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u76ee\u3092\u5f15\u304d\u3084\u3059\u3044\u3067\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> bounce {\r\n  0%, 100% {\r\n    <span>transform<\/span>: <span>translateY<\/span>(0);\r\n  }\r\n  50% {\r\n    <span>transform<\/span>: <span>translateY<\/span>(-20px);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u901f\u5ea6(animation-duration)\u3092\u77ed\u3081\uff08\u4f8b: 1s\uff09\u306b\u3059\u308b\u3068\u30dd\u30c3\u30d7\u306a\u5370\u8c61\u3001\u9577\u3081\uff08\u4f8b: 3s\uff09\u306b\u3059\u308b\u3068\u3086\u3063\u305f\u308a\u3057\u305f\u5370\u8c61\u3092\u4e0e\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>translateY(-20px) \u306e\u5024\u3092\u5909\u3048\u308b\u3068\u30d0\u30a6\u30f3\u30c9\u306e\u632f\u308c\u5e45\u304c\u5909\u308f\u308b\u306e\u3067\u3001\u8981\u7d20\u306e\u5927\u304d\u3055\u3084UI\u30c7\u30b6\u30a4\u30f3\u306b\u5408\u308f\u305b\u3066\u8abf\u6574\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-rotate\">3-2. \u56de\u8ee2\uff08rotate\uff09<\/h3>\n<p>\u8981\u7d20\u3092\u56de\u8ee2\u3055\u305b\u308b\u300crotate\u300d\u306f\u3001\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3084\u3001\u6ce8\u610f\u559a\u8d77\u3057\u305f\u3044\u30a2\u30a4\u30b3\u30f3\u3092\u3050\u308b\u3050\u308b\u56de\u3059\u969b\u306b\u3088\u304f\u4f7f\u308f\u308c\u307e\u3059\u3002\u30b7\u30f3\u30d7\u30eb\u306b360\u5ea6\u56de\u3059\u3060\u3051\u3067\u3082\u30a4\u30f3\u30d1\u30af\u30c8\u304c\u3042\u308a\u3001\u64cd\u4f5c\u304c\u7c21\u5358\u3067\u4f7f\u3044\u52dd\u624b\u306e\u826f\u3044\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> rotate {\r\n  <span>from<\/span> {\r\n    <span>transform<\/span>: <span>rotate<\/span>(0deg);\r\n  }\r\n  <span>to<\/span> {\r\n    <span>transform<\/span>: <span>rotate<\/span>(360deg);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u9023\u7d9a\u3057\u3066\u6b62\u307e\u3089\u306a\u3044\u52d5\u304d\u306b\u3057\u305f\u3044\u5834\u5408\u306f\u3001infinite \u30eb\u30fc\u30d7\u3067\u56de\u3057\u7d9a\u3051\u3089\u308c\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>rotate(360deg) \u3092 rotate(180deg)\u306b\u3059\u308b\u306a\u3069\u3001\u9014\u4e2d\u3067\u6b62\u3081\u308b\u3053\u3068\u3067\u3001\u30ab\u30fc\u30c9\u306e\u88cf\u9762\u3092\u898b\u305b\u308b\u7c21\u6613\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u3057\u3066\u3082\u5fdc\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-scale\">3-3. \u62e1\u5927\u7e2e\u5c0f\uff08scale\uff09<\/h3>\n<p>\u62e1\u5927\u7e2e\u5c0f\uff08scale\uff09\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u8981\u7d20\u3092\u5927\u304d\u304f\u3057\u305f\u308a\u5c0f\u3055\u304f\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u3067\u6ce8\u76ee\u3092\u5f15\u304d\u307e\u3059\u3002\u305f\u3068\u3048\u3070\u3001\u30dc\u30bf\u30f3\u306b\u30db\u30d0\u30fc\u3057\u305f\u3068\u304d\u3060\u3051\u62e1\u5927\u3057\u3066\u30a2\u30af\u30c6\u30a3\u30d6\u611f\u3092\u6f14\u51fa\u3059\u308b\u306a\u3069\u3001\u4f7f\u3048\u308b\u30b7\u30fc\u30f3\u304c\u5e45\u5e83\u3044\u70b9\u304c\u9b45\u529b\u3067\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> scale {\r\n  0%, 100% {\r\n    <span>transform<\/span>: <span>scale<\/span>(1);\r\n  }\r\n  50% {\r\n    <span>transform<\/span>: <span>scale<\/span>(1.5);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>scale(1.5) \u3092 scale(1.2) \u306b\u3059\u308b\u3060\u3051\u3067\u3082\u3001\u304b\u306a\u308a\u5370\u8c61\u304c\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>\u3042\u307e\u308a\u306b\u5927\u304d\u304f\u3057\u3059\u304e\u308b\u3068\u30c7\u30b6\u30a4\u30f3\u304c\u5d29\u308c\u3066\u3057\u307e\u3046\u5834\u5408\u304c\u3042\u308b\u306e\u3067\u3001\u7a0b\u3088\u3044\u30b5\u30a4\u30ba\u611f\u3092\u610f\u8b58\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-slideIn\">3-4. \u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\uff08slideIn\uff09<\/h3>\n<p>\u8981\u7d20\u304c\u753b\u9762\u5916\u304b\u3089\u30b9\u30c3\u3068\u5165\u3063\u3066\u304f\u308b\u300c\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u300d\u306f\u3001\u30da\u30fc\u30b8\u304c\u30ed\u30fc\u30c9\u3055\u308c\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3084\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u8981\u7d20\u304c\u898b\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u3068\u304d\u306b\u8868\u793a\u3059\u308b\u306a\u3069\u3001\u591a\u5f69\u306a\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\u3067\u4f7f\u3048\u307e\u3059\u3002\u52d5\u304d\u306b\u5408\u308f\u305b\u3066\u30d5\u30a7\u30fc\u30c9\u3082\u52a0\u3048\u308b\u3068\u3001\u3088\u308a\u81ea\u7136\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u4ed5\u4e0a\u304c\u308a\u307e\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> slideIn {\r\n  <span>from<\/span> {\r\n    <span>transform<\/span>: <span>translateX<\/span>(-100%);\r\n  }\r\n  <span>to<\/span> {\r\n    <span>transform<\/span>: <span>translateX<\/span>(0);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>-100% \u3092 100% \u306b\u5909\u66f4\u3059\u308c\u3070\u53f3\u5074\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3055\u305b\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\u4e0a\u4e0b\u65b9\u5411\uff08translateY(-100%) \u306a\u3069\uff09\u306b\u5fdc\u7528\u3057\u3066\u307f\u308b\u306e\u3082\u304a\u3059\u3059\u3081\u3067\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>JavaScript\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u30a4\u30d9\u30f3\u30c8\u3068\u7d44\u307f\u5408\u308f\u305b\u308c\u3070\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u7279\u5b9a\u306e\u4f4d\u7f6e\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089\u8981\u7d20\u304c\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3057\u3066\u304f\u308b\u3001\u3068\u3044\u3063\u305f\u52d5\u304d\u304c\u7c21\u5358\u306b\u5b9f\u88c5\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-fadeIn\">3-5. \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\uff08fadeIn\uff09<\/h3>\n<p>\u5f90\u3005\u306b\u900f\u660e\u304b\u3089\u4e0d\u900f\u660e\u3078\u5909\u5316\u3059\u308b\u300c\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u300d\u306f\u3001<strong>\u3042\u3089\u3086\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u57fa\u672c<\/strong>\u3068\u3044\u3063\u3066\u3082\u904e\u8a00\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u30b7\u30f3\u30d7\u30eb\u3060\u304b\u3089\u3053\u305d\u6c4e\u7528\u6027\u304c\u9ad8\u304f\u3001\u307b\u304b\u306e\u52d5\u304d\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u6d17\u7df4\u3055\u308c\u305f\u6f14\u51fa\u3092\u4f5c\u308a\u3084\u3059\u3044\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> fadeIn {\r\n  <span>from<\/span> {\r\n    <span>opacity<\/span>: <span>0<\/span>;\r\n  }\r\n  <span>to<\/span> {\r\n    <span>opacity<\/span>: <span>1<\/span>;\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u307b\u3093\u306e\u5c11\u3057\u3060\u3051\u4e0a\u4e0b\u306b\u79fb\u52d5\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u52a0\u3048\u305f\u3044\u5834\u5408\u306f\u3001transform: translateY(10px); opacity: 0; \u304b\u3089\u59cb\u3081\u308b\u306a\u3069\u5de5\u592b\u3059\u308b\u3068\u3001\u5965\u884c\u304d\u3084\u8efd\u3084\u304b\u3055\u304c\u6f14\u51fa\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>\u4ed6\u306e\u52d5\u304d\u3068\u5408\u308f\u305b\u308b\u3068\u304d\u306f\u3001\u30bf\u30a4\u30df\u30f3\u30b0(animation-delay)\u3092\u5909\u3048\u308b\u3053\u3068\u3067\u6bb5\u968e\u7684\u306a\u8868\u793a\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-flipX\">3-6. \u6a2a\u56de\u8ee2\uff08flipX\uff09<\/h3>\n<p>3D\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u98a8\u306b\u8981\u7d20\u304cX\u8ef8\u3092\u4e2d\u5fc3\u306b\u30af\u30eb\u30c3\u3068\u56de\u8ee2\u3059\u308b\u306e\u304c\u300cflipX\u300d\u3067\u3059\u3002\u30ab\u30fc\u30c9\u306e\u88cf\u9762\u3092\u898b\u305b\u308b\u3088\u3046\u306a\u6f14\u51fa\u3084\u3001\u524d\u5f8c\u306e\u60c5\u5831\u3092\u5165\u308c\u66ff\u3048\u308bUI\u306a\u3069\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002\u3061\u3087\u3063\u3068\u3057\u305f\u52d5\u304d\u3067\u610f\u5916\u6027\u3092\u51fa\u3057\u305f\u3044\u3068\u304d\u306b\u3082\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> flipX {\r\n  0%, 100% {\r\n    <span>transform<\/span>: <span>perspective<\/span>(400px) <span>rotateX<\/span>(0deg);\r\n  }\r\n  50% {\r\n    <span>transform<\/span>: <span>perspective<\/span>(400px) <span>rotateX<\/span>(180deg);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>perspective(400px) \u306e\u5024\u3092\u5909\u66f4\u3059\u308b\u3068\u3001\u56de\u8ee2\u6642\u306e\u5965\u884c\u304d\u611f\u304c\u5909\u5316\u3057\u307e\u3059\u3002\u6570\u5024\u3092\u5c0f\u3055\u304f\u3059\u308b\u3068\u3088\u308a\u7acb\u4f53\u7684\u3001\u5927\u304d\u304f\u3059\u308b\u3068\u9060\u8fd1\u611f\u304c\u3086\u308b\u3084\u304b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>\u30db\u30d0\u30fc\u6642\u306b\u767a\u52d5\u3059\u308b\u5834\u5408\u306f\u3001:hover \u3067 transform-style: preserve-3d; \u306a\u3069\u3092\u9069\u5207\u306b\u8a2d\u5b9a\u3059\u308b\u306e\u304c\u30dd\u30a4\u30f3\u30c8\u3067\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-flipY\">3-7. \u7e26\u56de\u8ee2\uff08flipY\uff09<\/h3>\n<p>\u300cflipX\u300d\u306e\u7e26\u7248\u3067\u3042\u308b\u300cflipY\u300d\u306f\u3001Y\u8ef8\u3092\u4e2d\u5fc3\u306b\u56de\u8ee2\u3057\u307e\u3059\u3002\u5de6\u53f3\u306b\u3081\u304f\u308b\u3088\u3046\u306a\u52d5\u304d\u3092\u6f14\u51fa\u3067\u304d\u308b\u306e\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u6a2a\u30b9\u30ef\u30a4\u30d7\u3084\u30c9\u30e9\u30c3\u30b0\u64cd\u4f5c\u3092\u884c\u3046UI\u306b\u3082\u4f3c\u5408\u3044\u307e\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> flipY {\r\n  0%, 100% {\r\n    <span>transform<\/span>: <span>perspective<\/span>(400px) <span>rotateY<\/span>(0deg);\r\n  }\r\n  50% {\r\n    <span>transform<\/span>: <span>perspective<\/span>(400px) <span>rotateY<\/span>(180deg);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u300cflipX\u300d\u3068\u540c\u69d8\u306b\u3001perspective \u306e\u5024\u3067\u7acb\u4f53\u611f\u3092\u8abf\u6574\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5165\u308c\u66ff\u3048\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u4e00\u6642\u7684\u306b\u88cf\u9762\u306b\u300c\u8aad\u307f\u8fbc\u307f\u4e2d\u2026\u300d\u3084\u300c\u79d8\u5bc6\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u300d\u3092\u51fa\u3059\u306a\u3069\u3001\u904a\u3073\u5fc3\u3042\u3075\u308c\u308b\u5b9f\u88c5\u306b\u3082\u6d3b\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-swing\">3-8. \u30b9\u30a4\u30f3\u30b0\uff08swing\uff09<\/h3>\n<p>\u8efd\u304f\u632f\u308a\u5b50\u306e\u3088\u3046\u306b\u5de6\u53f3\u3078\u63fa\u308c\u308b\u300cswing\u300d\u306f\u3001\u30dd\u30c3\u30d7\u3067\u30b3\u30df\u30ab\u30eb\u306a\u5370\u8c61\u3092\u4e0e\u3048\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002\u30dc\u30bf\u30f3\u3084\u30a2\u30a4\u30b3\u30f3\u3092\u6ce8\u76ee\u3055\u305b\u305f\u3044\u3068\u304d\u3001\u3061\u3087\u3063\u3068\u3057\u305f\u904a\u3073\u5fc3\u3092\u52a0\u3048\u305f\u3044\u3068\u304d\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> swing {\r\n  20% {\r\n    <span>transform<\/span>: <span>rotate<\/span>(15deg);\r\n  }\r\n  40% {\r\n    <span>transform<\/span>: <span>rotate<\/span>(-10deg);\r\n  }\r\n  60% {\r\n    <span>transform<\/span>: <span>rotate<\/span>(5deg);\r\n  }\r\n  80% {\r\n    <span>transform<\/span>: <span>rotate<\/span>(-5deg);\r\n  }\r\n  100% {\r\n    <span>transform<\/span>: <span>rotate<\/span>(0deg);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u6570\u5b57\u3092\u5909\u3048\u308b\u3053\u3068\u3067\u632f\u308c\u5e45\u3092\u5927\u304d\u304f\uff08\u307e\u305f\u306f\u5c0f\u3055\u304f\uff09\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>\u30c6\u30ad\u30b9\u30c8\u8981\u7d20\u306b\u9069\u7528\u3059\u308b\u3068\u3001\u6587\u5b57\u304c\u3086\u3089\u3086\u3089\u63fa\u308c\u308b\u3061\u3087\u3063\u3068\u30e6\u30cb\u30fc\u30af\u306a\u898b\u305b\u65b9\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-wobble\">3-9. \u30a6\u30a9\u30d6\u30eb\uff08wobble\uff09<\/h3>\n<p>\u300c\u30a6\u30a9\u30d6\u30eb\u300d\u306f\u3001\u5de6\u53f3\u306b\u63fa\u308c\u306a\u304c\u3089\u89d2\u5ea6\u3082\u5fae\u5999\u306b\u5909\u308f\u308b\u72ec\u7279\u306e\u52d5\u304d\u3067\u3059\u3002\u30b9\u30a4\u30f3\u30b0\u3088\u308a\u3082\u3084\u3084\u6fc0\u3057\u304f\u3001\u6f2b\u753b\u3084\u30a2\u30cb\u30e1\u3067\u767b\u5834\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u304c\u52d5\u63fa\u3057\u3066\u3044\u308b\u3088\u3046\u306a\u30a4\u30e1\u30fc\u30b8\u3092\u6f14\u51fa\u3067\u304d\u307e\u3059\u3002\u6ce8\u610f\u3092\u5f15\u304f\u30a2\u30e9\u30fc\u30c8\u3084\u3001\u30a8\u30e9\u30fc\u8868\u73fe\u306b\u3082\u4f7f\u3048\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> wobble {\r\n  0% {\r\n    <span>transform<\/span>: <span>translateX<\/span>(0%);\r\n  }\r\n  15% {\r\n    <span>transform<\/span>: <span>translateX<\/span>(-25%) <span>rotate<\/span>(-5deg);\r\n  }\r\n  30% {\r\n    <span>transform<\/span>: <span>translateX<\/span>(20%) <span>rotate<\/span>(3deg);\r\n  }\r\n  45% {\r\n    <span>transform<\/span>: <span>translateX<\/span>(-15%) <span>rotate<\/span>(-3deg);\r\n  }\r\n  60% {\r\n    <span>transform<\/span>: <span>translateX<\/span>(10%) <span>rotate<\/span>(2deg);\r\n  }\r\n  75% {\r\n    <span>transform<\/span>: <span>translateX<\/span>(-5%) <span>rotate<\/span>(-1deg);\r\n  }\r\n  100% {\r\n    <span>transform<\/span>: <span>translateX<\/span>(0%);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u300c\u753b\u9762\u5185\u3067\u5927\u3052\u3055\u306b\u63fa\u308c\u308b\u300d\u3088\u3046\u306a\u5370\u8c61\u306b\u306a\u308b\u305f\u3081\u3001\u4f7f\u3046\u5834\u6240\u3092\u9078\u3076\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>\u30a2\u30e9\u30fc\u30c8\u7cfb\u306e\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u3084\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u76ee\u3092\u5411\u3051\u3066\u307b\u3057\u3044\u8981\u7d20\u306a\u3069\u3001\u7279\u306b\u5f37\u8abf\u3057\u305f\u3044\u5834\u9762\u3067\u6d3b\u8e8d\u3057\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h3 id=\"sec-tada\">3-10. \u30bf\u30c0\uff08tada\uff09<\/h3>\n<p>\u300c\u30bf\u30c0\uff08tada\uff09\u300d\u306f\u3001\u8981\u7d20\u304c\u56de\u8ee2\u3068\u62e1\u5927\u7e2e\u5c0f\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u8cd1\u3084\u304b\u306b\u52d5\u304f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002\u304a\u795d\u3044\u611f\u3084\u5927\u304d\u306a\u9054\u6210\u611f\u3092\u6f14\u51fa\u3057\u305f\u3044\u3068\u304d\u306b\u3074\u3063\u305f\u308a\u3067\u3001\u8868\u5f70\u753b\u9762\u3084\u5b9f\u7e3e\u89e3\u9664\u306e\u6f14\u51fa\u306a\u3069\u306b\u3082\u4f7f\u3048\u307e\u3059\u3002<\/p>\n<pre><code>@<span>keyframes<\/span> tada {\r\n  0% {\r\n    <span>transform<\/span>: <span>scale<\/span>(1);\r\n  }\r\n  10%, 20% {\r\n    <span>transform<\/span>: <span>scale<\/span>(0.9) <span>rotate<\/span>(-3deg);\r\n  }\r\n  30%, 50%, 70%, 90% {\r\n    <span>transform<\/span>: <span>scale<\/span>(1.1) <span>rotate<\/span>(3deg);\r\n  }\r\n  40%, 60%, 80% {\r\n    <span>transform<\/span>: <span>scale<\/span>(1.1) <span>rotate<\/span>(-3deg);\r\n  }\r\n  100% {\r\n    <span>transform<\/span>: <span>scale<\/span>(1) <span>rotate<\/span>(0);\r\n  }\r\n}<\/code><\/pre>\n<ul>\n<li>\n<p><strong>\u4f7f\u3044\u65b9\u306e\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u5927\u304d\u304f\u63fa\u308c\u305f\u308a\u7e2e\u3093\u3060\u308a\u3059\u308b\u306e\u3067\u3001\u4f7f\u3044\u3069\u3053\u308d\u306b\u3088\u3063\u3066\u306f\u30b5\u30a4\u30c8\u5168\u4f53\u304c\u6d3e\u624b\u306a\u5370\u8c61\u306b\u306a\u308b\u3053\u3068\u3082\u3002\u8981\u7d20\u3084\u30ab\u30e9\u30fc\u30ea\u30f3\u30b0\u3068\u306e\u30d0\u30e9\u30f3\u30b9\u3092\u8003\u3048\u3066\u53d6\u308a\u5165\u308c\u308b\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<\/p>\n<\/li>\n<li>\n<p>JavaScript\u3067\u300c\u7279\u5b9a\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u6210\u529f\u3057\u305f\u3068\u304d\u3060\u3051\u4e00\u77ac\u3060\u3051\u767a\u52d5\u300d\u3068\u3044\u3063\u305f\u5f62\u306b\u3059\u308b\u3068\u3001\u30e6\u30fc\u30b6\u30fc\u3078\u6210\u529f\u901a\u77e5\u3092\u697d\u3057\u304f\u4f1d\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr>\n<h2 id=\"sec-custom\">4. \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3084\u5fdc\u7528\u306e\u30d2\u30f3\u30c8<\/h2>\n<p>\u3053\u3053\u307e\u306710\u7a2e\u985e\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u7d39\u4ecb\u3057\u3066\u304d\u307e\u3057\u305f\u304c\u3001\u305d\u306e\u307e\u307e\u4f7f\u3046\u3060\u3051\u3067\u306a\u304f\u3001\u81ea\u5206\u597d\u307f\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b\u306e\u3082\u697d\u3057\u3044\u90e8\u5206\u3067\u3059\u3002\u305f\u3068\u3048\u3070\u3001\u6b21\u306e\u3088\u3046\u306a\u30dd\u30a4\u30f3\u30c8\u306b\u6ce8\u76ee\u3057\u3066\u307f\u308b\u3068\u3001\u7c21\u5358\u306b\u30aa\u30ea\u30b8\u30ca\u30ea\u30c6\u30a3\u3092\u52a0\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n<ol>\n<li>\n<p><strong>duration\uff08\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u518d\u751f\u6642\u9593\uff09\u306e\u5909\u66f4<\/strong><\/p>\n<ul>\n<li>\n<p>3s \u3092 1s \u306b\u3059\u308b\u3068\u4e00\u6c17\u306b\u30b9\u30d4\u30fc\u30c7\u30a3\u30fc\u306a\u52d5\u304d\u306b\u5909\u308f\u308a\u3001\u9006\u306b 5s \u4ee5\u4e0a\u306b\u5ef6\u3070\u3059\u3068\u30b9\u30ed\u30fc\u30e2\u30fc\u30b7\u30e7\u30f3\u306e\u3088\u3046\u306a\u6ed1\u3089\u304b\u3055\u3092\u6f14\u51fa\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>easing\uff08\u30a4\u30fc\u30b8\u30f3\u30b0\uff09\u306e\u6d3b\u7528<\/strong><\/p>\n<ul>\n<li>\n<p>ease-in-out \u3084 cubic-bezier \u306a\u3069\u3092\u4f7f\u3046\u3068\u3001\u5358\u8abf\u306a\u52d5\u304d\u304c\u300c\u6700\u521d\u306f\u3086\u3063\u304f\u308a\u3001\u9014\u4e2d\u304b\u3089\u901f\u304f\u300d\u306a\u3069\u306e\u30e1\u30ea\u30cf\u30ea\u3042\u308b\u6f14\u51fa\u306b\u5909\u5316\u3057\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u30a4\u30d9\u30f3\u30c8\u9023\u52d5\uff08JavaScript\u3092\u4f7f\u3063\u305f\u5236\u5fa1\uff09<\/strong><\/p>\n<ul>\n<li>\n<p>\u30b9\u30af\u30ed\u30fc\u30eb\u3084\u30af\u30ea\u30c3\u30af\u3001\u30db\u30d0\u30fc\u30a4\u30d9\u30f3\u30c8\u306a\u3069\u3001\u30e6\u30fc\u30b6\u30fc\u884c\u52d5\u306b\u5408\u308f\u305b\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u767a\u706b\u3055\u305b\u308b\u3068\u3001\u3088\u308a<strong>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6<\/strong>\u306aUI\u304c\u4f5c\u308c\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u8907\u6570\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7d44\u307f\u5408\u308f\u305b<\/strong><\/p>\n<ul>\n<li>\n<p>\u305f\u3068\u3048\u3070\u3001\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3057\u306a\u304c\u3089\u30d0\u30a6\u30f3\u30c9\u3059\u308b\u3068\u3001\u3088\u308a\u67d4\u3089\u304b\u3044\u767b\u5834\u611f\u3092\u5f97\u3089\u308c\u307e\u3059\u3002@keyframes\u3092\u8907\u6570\u91cd\u306d\u308b\u3053\u3068\u3084\u3001\u30ad\u30fc\u30bf\u30a4\u30e0\u3092\u7d30\u304b\u304f\u533a\u5207\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u72ec\u5275\u7684\u306a\u52d5\u304d\u3092\u4f5c\u308a\u51fa\u305b\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<hr>\n<h2 id=\"sec-sample\">5. HTML\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u5b9f\u8df5<\/h2>\n<p>\u3053\u3053\u304b\u3089\u306f\u3001\u5b9f\u969b\u306b<strong>HTML\u30d5\u30a1\u30a4\u30eb<\/strong>\u3092\u4f5c\u6210\u3057\u3066\u3001\u5148\u307b\u3069\u6319\u3052\u305f10\u7a2e\u985e\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u78ba\u8a8d\u3067\u304d\u308b\u30b5\u30f3\u30d7\u30eb\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u958b\u3044\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<ol>\n<li>\n<p>\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\uff08Visual Studio Code\u306a\u3069\uff09\u3092\u958b\u304d\u3001\u65b0\u898f\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308b<\/p>\n<\/li>\n<li>\n<p>animation-demo.html \u306a\u3069\u306e\u540d\u524d\u3067\u4fdd\u5b58<\/p>\n<\/li>\n<li>\n<p>\u4e0b\u8a18\u306e\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30da<\/p>\n<\/li>\n<li>\n<p>\u30d6\u30e9\u30a6\u30b6\u3067 animation-demo.html \u3092\u958b\u304f\u3068\u3001\u30b9\u30bf\u30fc\u30c8\/\u30b9\u30c8\u30c3\u30d7\u30dc\u30bf\u30f3\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059<\/p>\n<\/li>\n<\/ol>\n<pre><code>&lt;!<span>DOCTYPE<\/span> html&gt;\r\n&lt;html lang=<span>\"ja\"<\/span>&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=<span>\"UTF-8\"<\/span> \/&gt;\r\n    &lt;meta name=<span>\"viewport\"<\/span> content=<span>\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;\r\n    &lt;title&gt;\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30c7\u30e2&lt;\/title&gt;\r\n    &lt;style&gt;\r\n      <span>\/* \u30b3\u30f3\u30c6\u30ca *\/<\/span>\r\n      #js-result {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        padding: 20px;\r\n      }\r\n\r\n      <span>\/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7528\u30dc\u30c3\u30af\u30b9\u306e\u30b9\u30bf\u30a4\u30eb *\/<\/span>\r\n      .animation-box {\r\n        width: 100px;\r\n        height: 100px;\r\n        background-color: #3498db;\r\n        color: white;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        font-size: 14px;\r\n        text-align: center;\r\n        border-radius: 10px;\r\n      }\r\n\r\n      <span>\/* \u64cd\u4f5c\u30dc\u30bf\u30f3 *\/<\/span>\r\n      #animation-controls {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        margin-bottom: 20px;\r\n      }\r\n\r\n      button {\r\n        padding: 10px 20px;\r\n        font-size: 16px;\r\n        cursor: pointer;\r\n      }\r\n\r\n      <span>\/* \u25bc\u25bc\u25bc 10\u7a2e\u985e\u306e@keyframes \u25bc\u25bc\u25bc *\/<\/span>\r\n      @keyframes bounce {\r\n        <span>0<\/span>%, <span>100<\/span>% {\r\n          transform: translateY(<span>0<\/span>);\r\n        }\r\n        <span>50<\/span>% {\r\n          transform: translateY(-20px);\r\n        }\r\n      }\r\n      @keyframes rotate {\r\n        from {\r\n          transform: rotate(0deg);\r\n        }\r\n        to {\r\n          transform: rotate(360deg);\r\n        }\r\n      }\r\n      @keyframes scale {\r\n        <span>0<\/span>%, <span>100<\/span>% {\r\n          transform: scale(<span>1<\/span>);\r\n        }\r\n        <span>50<\/span>% {\r\n          transform: scale(<span>1.5<\/span>);\r\n        }\r\n      }\r\n      @keyframes slideIn {\r\n        from {\r\n          transform: translateX(-<span>100<\/span>%);\r\n        }\r\n        to {\r\n          transform: translateX(<span>0<\/span>);\r\n        }\r\n      }\r\n      @keyframes fadeIn {\r\n        from {\r\n          opacity: <span>0<\/span>;\r\n        }\r\n        to {\r\n          opacity: <span>1<\/span>;\r\n        }\r\n      }\r\n      @keyframes flipX {\r\n        <span>0<\/span>%, <span>100<\/span>% {\r\n          transform: perspective(400px) rotateX(0deg);\r\n        }\r\n        <span>50<\/span>% {\r\n          transform: perspective(400px) rotateX(180deg);\r\n        }\r\n      }\r\n      @keyframes flipY {\r\n        <span>0<\/span>%, <span>100<\/span>% {\r\n          transform: perspective(400px) rotateY(0deg);\r\n        }\r\n        <span>50<\/span>% {\r\n          transform: perspective(400px) rotateY(180deg);\r\n        }\r\n      }\r\n      @keyframes swing {\r\n        <span>20<\/span>% {\r\n          transform: rotate(15deg);\r\n        }\r\n        <span>40<\/span>% {\r\n          transform: rotate(-10deg);\r\n        }\r\n        <span>60<\/span>% {\r\n          transform: rotate(5deg);\r\n        }\r\n        <span>80<\/span>% {\r\n          transform: rotate(-5deg);\r\n        }\r\n        <span>100<\/span>% {\r\n          transform: rotate(0deg);\r\n        }\r\n      }\r\n      @keyframes wobble {\r\n        <span>0<\/span>% {\r\n          transform: translateX(<span>0<\/span>%);\r\n        }\r\n        <span>15<\/span>% {\r\n          transform: translateX(-<span>25<\/span>%) rotate(-5deg);\r\n        }\r\n        <span>30<\/span>% {\r\n          transform: translateX(<span>20<\/span>%) rotate(3deg);\r\n        }\r\n        <span>45<\/span>% {\r\n          transform: translateX(-<span>15<\/span>%) rotate(-3deg);\r\n        }\r\n        <span>60<\/span>% {\r\n          transform: translateX(<span>10<\/span>%) rotate(2deg);\r\n        }\r\n        <span>75<\/span>% {\r\n          transform: translateX(-<span>5<\/span>%) rotate(-1deg);\r\n        }\r\n        <span>100<\/span>% {\r\n          transform: translateX(<span>0<\/span>%);\r\n        }\r\n      }\r\n      @keyframes tada {\r\n        <span>0<\/span>% {\r\n          transform: scale(<span>1<\/span>);\r\n        }\r\n        <span>10<\/span>%, <span>20<\/span>% {\r\n          transform: scale(<span>0.9<\/span>) rotate(-3deg);\r\n        }\r\n        <span>30<\/span>%, <span>50<\/span>%, <span>70<\/span>%, <span>90<\/span>% {\r\n          transform: scale(<span>1.1<\/span>) rotate(3deg);\r\n        }\r\n        <span>40<\/span>%, <span>60<\/span>%, <span>80<\/span>% {\r\n          transform: scale(<span>1.1<\/span>) rotate(-3deg);\r\n        }\r\n        <span>100<\/span>% {\r\n          transform: scale(<span>1<\/span>) rotate(<span>0<\/span>);\r\n        }\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=<span>\"animation-controls\"<\/span>&gt;\r\n      &lt;button id=<span>\"startButton\"<\/span>&gt;\u958b\u59cb&lt;\/button&gt;\r\n      &lt;button id=<span>\"stopButton\"<\/span>&gt;\u505c\u6b62&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div id=<span>\"js-result\"<\/span>&gt;&lt;\/div&gt;\r\n\r\n    &lt;script&gt;\r\n      <span>\/\/ \u8981\u7d20\u751f\u6210\u7528\u306e\u95a2\u6570<\/span>\r\n      function createAnimationElement(id, className) {\r\n        const element = document.createElement(<span>\"div\"<\/span>);\r\n        element.id = id;\r\n        element.className = className;\r\n        element.textContent = id;\r\n        <span>return<\/span> element;\r\n      }\r\n\r\n      <span>\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u958b\u59cb<\/span>\r\n      function startAnimation(element, animationName) {\r\n        element.style.animation = `${animationName} 3s infinite`;\r\n      }\r\n\r\n      <span>\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u505c\u6b62<\/span>\r\n      function stopAnimation(element) {\r\n        element.style.animation = <span>\"none\"<\/span>;\r\n      }\r\n\r\n      <span>\/\/ 10\u7a2e\u985e\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u7ba1\u7406\u3059\u308b\u914d\u5217<\/span>\r\n      const animations = [\r\n        { id: <span>\"bounce\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>bounce<\/span>\" },\r\n        <\/span>{ id: <span>\"rotate\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>rotate<\/span>\" },\r\n        <\/span>{ id: <span>\"scale\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>scale<\/span>\" },\r\n        <\/span>{ id: <span>\"slideIn\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>slideIn<\/span>\" },\r\n        <\/span>{ id: <span>\"fadeIn\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>fadeIn<\/span>\" },\r\n        <\/span>{ id: <span>\"flipX\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>flipX<\/span>\" },\r\n        <\/span>{ id: <span>\"flipY\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>flipY<\/span>\" },\r\n        <\/span>{ id: <span>\"swing\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>swing<\/span>\" },\r\n        <\/span>{ id: <span>\"wobble\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>wobble<\/span>\" },\r\n        <\/span>{ id: <span>\"tada\"<\/span>, <span><span>class<\/span>: \"<span>animation<\/span>-<span>box<\/span>\", <span>name<\/span>: \"<span>tada<\/span>\" },\r\n      ];\r\n\r\n      \/\/ \u30b3\u30f3\u30c6\u30ca\u8981\u7d20\u3092\u53d6\u5f97\r\n      <span>const<\/span> <span>resultDiv<\/span> = <span>document<\/span>.<span>getElementById<\/span>(\"<span>js<\/span>-<span>result<\/span>\");\r\n\r\n      \/\/ \u8981\u7d20\u3092\u751f\u6210\u3057\u3066<span>DOM<\/span>\u306b\u8ffd\u52a0\r\n      <span>animations<\/span>.<span>forEach<\/span>((<span>animation<\/span>) =&gt; <\/span>{\r\n        const element = createAnimationElement(animation.id, animation.<span>class<\/span>);\r\n        resultDiv.appendChild(element);\r\n      });\r\n\r\n      <span>\/\/ \u958b\u59cb\u30fb\u505c\u6b62\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u8a2d\u5b9a<\/span>\r\n      document.getElementById(<span>\"startButton\"<\/span>).addEventListener(<span>\"click\"<\/span>, () =&gt; {\r\n        animations.forEach((animation) =&gt; {\r\n          const element = document.getElementById(animation.id);\r\n          startAnimation(element, animation.name);\r\n        });\r\n      });\r\n\r\n      document.getElementById(<span>\"stopButton\"<\/span>).addEventListener(<span>\"click\"<\/span>, () =&gt; {\r\n        animations.forEach((animation) =&gt; {\r\n          const element = document.getElementById(animation.id);\r\n          stopAnimation(element);\r\n        });\r\n      });\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>\u5b9f\u969b\u306b\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u3044\u3066\u300c\u958b\u59cb\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u300110\u7a2e\u985e\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u540c\u6642\u306b\u767a\u52d5\u3057\u307e\u3059\u3002\u81ea\u5206\u304c\u6c17\u306b\u5165\u3063\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u3042\u308c\u3070\u3001\u8a72\u5f53\u3059\u308b@keyframes\u306e\u307f\u62bd\u51fa\u3057\u3066\u3001\u5225\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u6d3b\u7528\u3057\u305f\u308a\u3001\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u5909\u3048\u305f\u308a\u3068\u3044\u3063\u305f\u5fdc\u7528\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<hr>\n<h2 id=\"sec-conclusion\">6. \u307e\u3068\u3081\u3068\u6b21\u306e\u30b9\u30c6\u30c3\u30d7<\/h2>\n<p>\u4eca\u56de\u7d39\u4ecb\u3057\u305f<strong>10\u7a2e\u985e\u306e\u30e6\u30cb\u30fc\u30af\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/strong>\u306f\u3001\u3044\u305a\u308c\u3082\u6c4e\u7528\u6027\u304c\u9ad8\u304f\u3001Web\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u306e<strong>UI\u30fbUX\u3092\u5411\u4e0a<\/strong>\u3055\u305b\u308b\u4e0a\u3067\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u306b\u306a\u308a\u307e\u3059\u3002\u3069\u308c\u3082\u57fa\u672c\u7684\u306a@keyframes\u3068CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u5b8c\u7d50\u3059\u308b\u305f\u3081\u3001\u521d\u5fc3\u8005\u306e\u65b9\u3067\u3082\u6bd4\u8f03\u7684\u6c17\u8efd\u306b\u53d6\u308a\u5165\u308c\u3089\u308c\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<ul>\n<li>\n<p><strong>\u300c\u3042\u306a\u305f\u306f\u3069\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304b\u3089\u8a66\u3057\u3066\u307f\u305f\u3044\u3067\u3059\u304b\uff1f\u300d<\/strong><br \/>\u305c\u3072\u3001\u5b9f\u969b\u306eHTML\u30d5\u30a1\u30a4\u30eb\u3067\u4e00\u3064\u305a\u3064\u52d5\u304d\u3092\u78ba\u8a8d\u3057\u3001\u81ea\u5206\u597d\u307f\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u300c\u30a4\u30d9\u30f3\u30c8\u3068\u9023\u52d5\u3055\u305b\u305f\u3044\u5834\u5408\u306f\uff1f\u300d<\/strong><br \/>JavaScript\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3001\u30db\u30d0\u30fc\u30a4\u30d9\u30f3\u30c8\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u30a4\u30d9\u30f3\u30c8\u306a\u3069\u3068\u7d44\u307f\u5408\u308f\u305b\u308c\u3070\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u767a\u706b\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u81ea\u5728\u306b\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u300c\u3082\u3063\u3068\u8907\u96d1\u306a\u52d5\u304d\u3092\u4f5c\u308a\u305f\u3044\u306a\u3089\uff1f\u300d<\/strong><br \/>\u8907\u6570\u306e@keyframes\u3092\u6bb5\u968e\u7684\u306b\u5207\u308a\u66ff\u3048\u305f\u308a\u3001JavaScript\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u30c0\u30a4\u30ca\u30df\u30c3\u30af\u306b\u66f8\u304d\u63db\u3048\u305f\u308a\u3059\u308b\u3068\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u6700\u5f8c\u306b\u3001<strong>SEO\u306e\u89b3\u70b9<\/strong>\u304b\u3089\u306f\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u591a\u304f\u306a\u308b\u307b\u3069\u30da\u30fc\u30b8\u306e\u30ea\u30bd\u30fc\u30b9\uff08\u7279\u306bCSS\u3084JS\u30d5\u30a1\u30a4\u30eb\uff09\u304c\u5897\u5927\u3057\u3066\u8868\u793a\u901f\u5ea6\u304c\u9045\u304f\u306a\u308b\u30ea\u30b9\u30af\u3082\u3042\u308a\u307e\u3059\u3002\u753b\u50cf\u3084\u52d5\u753b\u30d5\u30a1\u30a4\u30eb\u306e\u5727\u7e2e\u3001\u30b3\u30fc\u30c9\u306e\u30df\u30cb\u30d5\u30a1\u30a4\u3001\u4e0d\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u524a\u9664\u306a\u3069\u3001<strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/strong>\u306b\u3082\u6c17\u3092\u914d\u308a\u307e\u3057\u3087\u3046\u3002\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u3060\u3051\u3067\u306a\u304f\u3001\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u5411\u4e0a\u306e\u305f\u3081\u306b\u3082\u91cd\u8981\u306a\u8981\u7d20\u3067\u3059\u3002<\/p>\n<p><strong>\u3053\u306e\u8a18\u4e8b\u3092\u53c2\u8003\u306b\u3001\u3042\u306a\u305f\u306e\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u306b\u9b45\u529b\u7684\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u53d6\u308a\u5165\u308c\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/strong> \u521d\u5fc3\u8005\u306e\u65b9\u3067\u3082\u4e00\u6b69\u305a\u3064\u7406\u89e3\u3092\u6df1\u3081\u3001\u3055\u3089\u306b\u767a\u5c55\u7684\u306a\u52d5\u304d\u306b\u6311\u6226\u3057\u3066\u3044\u304f\u3053\u3068\u3067\u3001\u3088\u308a\u6d17\u7df4\u3055\u308c\u305fWeb\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u3068\u3057\u3066\u306e\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u3064\u3051\u3089\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<hr>\n<h3>\u3010\u5916\u90e8\u30ea\u30f3\u30af\u3011<\/h3>\n<ul>\n<li>\n<p><strong>MDN Web Docs\uff08CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\uff09<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/CSS_Animations\">CSS Animations &#8211; MDN<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/@keyframes\">@keyframes &#8211; MDN<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p><strong>MDN Web Docs\uff08JavaScript\u95a2\u9023\uff09<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\">JavaScript (Mozilla Developer Network)<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>\u3010\u5185\u90e8\u30ea\u30f3\u30af\u3011<\/h3>\n<p><a href=\"https:\/\/route-zero.com\/recruit\/route\/894\/\">\u3010\u521d\u5fc3\u8005\u3067\u3082\u7c21\u5358\uff01\u3011JavaScript\u3067\u59cb\u3081\u308b\u7c21\u5358\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\uff5c\u97f3\u58f0\u6587\u5b57\u8d77\u3053\u3057\u30c4\u30fc\u30eb\u4f5c\u6210\u30ac\u30a4\u30c9<\/a><\/p>\n<p><a href=\"https:\/\/route-zero.com\/recruit\/route\/901\/\">\u3010\u7c21\u5358\u306b\u8a66\u305b\u308b\u3011CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u4ed5\u7d44\u307f\u3092\u5fb9\u5e95\u89e3\u8aac\uff01\u521d\u5fc3\u8005\u3067\u3082\u308f\u304b\u308b\u52d5\u304d\u306e\u4f5c\u308a\u65b9<\/a><\/p>\n<p><a href=\"https:\/\/route-zero.com\/recruit\/route\/1076\/\">\u3010CSS\u306e\u57fa\u672c\u3011\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u7c21\u5358\u306b\u4e2d\u592e\u306b\u914d\u7f6e\u3059\u308b\u65b9\u6cd5\u3092\u5fb9\u5e95\u89e3\u8aac<\/a><\/p>\n<\/div>\n","protected":false},"featured_media":1092,"template":"","_links":{"self":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route\/1091"}],"collection":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route"}],"about":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/types\/route"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media\/1092"}],"wp:attachment":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media?parent=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}