{"componentChunkName":"component---src-templates-single-post-js","path":"/posts/animate-cssで間隔を調整する/","webpackCompilationHash":"0bb9bd8306defc5c5a8b","result":{"data":{"post":{"frontmatter":{"meta":{"title":"Animate.cssで間隔を調整する","description":"今回はAnimate.cssで間隔を調整してみます。少しばかり計算が必要なので表計算ソフトでの計算方法も記載してます。","noindex":null,"canonicalLink":null},"title":"Animate.cssで間隔を調整する","template":"SinglePost","subtitle":null,"date":"2019-11-02T03:01:28.314Z","categories":[{"category":"Tech"}]},"html":"

最近HPを作成する仕事が入ってきました。\nそこまでがんばらなくても良いのですが、少しだけ動きを付けたいということで、少し古いのですが、\nAnimate.cssで動きを付けました。

\n

導入

\n

導入は簡単。\n上記サイトの「Download Animate.css」をクリックすれば、CSSが表示されるので、それをlinkタグで読み込むだけ。

\n
 <link rel=\"stylesheet\" href=\"css/animate.css\">\n
\n

動かしたい要素にクラスを付与

\n
<h1 class=\"animated flip\" id=\"top_title\">Enjoy</h1>\n
\n

これだけで動きます。\n今回はflipにしてみました。\nただし、これだけだといっかいぐるりと回るだけ。

\n

永遠に動き続けるようにする

\n

style当てます。animation-iteration-countをinfiniteにしてあげれば、ずっと動くようになります。

\n
#top_title{\n/* X回繰り返す */\n-webkit-animation-iteration-count: infinite;\n-moz-animation-iteration-count: infinite;\n-ms-animation-iteration-count: infinite;\n-o-animation-iteration-count: infinite;\nanimation-iteration-count: infinite;\n}\n
\n

これだと、ひたすら回り続ける上、終了直後に開始され、しつこい動きになってしまいます。\nそこで、時間間隔をあけるようにします。

\n

まずは、一回の動きが何秒かけて動かしたいかを考えます。\nいろいろ試したところ2秒だと綺麗な動きをたもてたまま、焦った印象もなく期待通りの1回の動きをしてくれましたので、animation-durationを2sにしました。

\n
#top_title{\n/* X回繰り返す */\n-webkit-animation-iteration-count: infinite;\n-moz-animation-iteration-count: infinite;\n-ms-animation-iteration-count: infinite;\n-o-animation-iteration-count: infinite;\nanimation-iteration-count: infinite;\n\n/* X秒かけてアニメーションする */\n-webkit-animation-duration: 2s;\n-moz-animation-duration: 2s;\n-ms-animation-duration: 2s;\n-o-animation-duration: 2s;\nanimation-duration: 2s;\n\n}\n
\n

次に、終了から開始の間隔を調整したいところですが、\nanimate.cssをみてみるとこんな記載が。

\n
@keyframes flip {\n  from {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, -360deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n  \n\n  40% {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -190deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -190deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n\n  50% {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -170deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -170deg);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  80% {\n    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg);\n    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  to {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n}\n
\n

40%⇨50％⇨80％⇨to(100%)で動きが調整されています。\nこの割合のまま動いてくれた上で、終了から開始までの間隔を付けてあげればOKということで、\n表計算ソフト登場\n\"image.png\"

\n\n

ということで、CSSを変更

\n
#top_title{\n/* X回繰り返す */\n-webkit-animation-iteration-count: infinite;\n-moz-animation-iteration-count: infinite;\n-ms-animation-iteration-count: infinite;\n-o-animation-iteration-count: infinite;\nanimation-iteration-count: infinite;\n\n/* X秒かけてアニメーションする */\n-webkit-animation-duration: 5s;\n-moz-animation-duration: 5s;\n-ms-animation-duration: 5s;\n-o-animation-duration: 5s;\nanimation-duration: 5s;\n\n}\n
\n

さらにこの計算結果にあわせて@keyframes flipも変えてあげます。

\n
@keyframes flip {\n  from {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, -360deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n\n  16% {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -190deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -190deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n\n  20% {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -170deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n      rotate3d(0, 1, 0, -170deg);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  32% {\n    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg);\n    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  40% {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n  to {\n    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n      rotate3d(0, 1, 0, 0deg);\n    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n}\n
\n

動きのイメージとしては、40％になったら、toと同じ値をぶこんであげれば、それ以降は動かないで残りの60％を過ごしてくれるイメージ

\n

これで、ほぼほぼ完了。

\n

動き出す秒数を考える。

\n

私の場合、bootstrapを使って、読み込み時に画面サイズを調整していました。\n読み込み時点で、このアニメーションが動くと、それに合わせて、画面サイズを調整してしまっていたので、\nアニメーションが動き出す秒数をanimation-delayで調整。1秒あれば、読み込み完了するでしょうという適当名考えで1sにしました。

\n
#top_title{\n/* X回繰り返す */\n-webkit-animation-iteration-count: infinite;\n-moz-animation-iteration-count: infinite;\n-ms-animation-iteration-count: infinite;\n-o-animation-iteration-count: infinite;\nanimation-iteration-count: infinite;\n\n/* X秒かけてアニメーションする */\n-webkit-animation-duration: 5s;\n-moz-animation-duration: 5s;\n-ms-animation-duration: 5s;\n-o-animation-duration: 5s;\nanimation-duration: 5s;\n\n/* X秒おいてからアニメーションする */\n-webkit-animation-delay: 1s;\n-moz-animation-delay:1s;\n-ms-animation-delay:1s;\n-o-animation-delay:1s;\nanimation-delay:1s;\n\n}\n
\n

以上で終わり。

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
こちらでも公開中
\"hatena\"
はてなブログ
\"luck!\"
Luck!
\n
\n
\n\n
","id":"af531f3a-b7d2-5c9e-ad22-e8378a078f07"},"allPosts":{"edges":[{"node":{"id":"11e872df-ccae-573a-bd93-b9c1fafbab72","fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}},"next":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"previous":null},{"node":{"id":"af531f3a-b7d2-5c9e-ad22-e8378a078f07","fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"next":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"previous":{"fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}}},{"node":{"id":"b320c2db-f74d-5213-be91-d01c7f94f8c0","fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"next":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"previous":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}}},{"node":{"id":"cbd9c95c-a098-592c-bfd9-a936996ff335","fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"next":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"previous":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}}},{"node":{"id":"fc5fe850-be92-5297-859f-0839f6b2fbb7","fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"next":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"previous":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}}},{"node":{"id":"d8500bc6-e602-599e-a22f-80810d132de2","fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"next":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"previous":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}}},{"node":{"id":"4c934147-b318-5afd-9241-c1f5d4d75e2f","fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"next":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"previous":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}}},{"node":{"id":"04233bd7-e37d-57cb-b458-50e230b67866","fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"next":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"previous":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}}},{"node":{"id":"ecb65f65-3564-58d5-b2c6-1b712b21783b","fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"next":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"previous":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}}},{"node":{"id":"86bea805-00cf-5633-af27-2bcd764f3d42","fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"next":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"previous":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}}},{"node":{"id":"e3ba1aa1-d2b2-5519-b9b9-00efdcadbd11","fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"next":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"previous":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}}},{"node":{"id":"d31690b3-2c7d-5560-9ab4-a57d83e95b62","fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"previous":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}}},{"node":{"id":"8601b324-6161-51ed-95ce-cb5ffe1ffaa6","fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"previous":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}}},{"node":{"id":"450caa1d-e0c5-5096-95c9-13b3857b90b3","fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}}},{"node":{"id":"1877003c-32b0-5bc4-9cee-8b736797bf64","fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"next":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}}},{"node":{"id":"3777734d-dc86-5124-830b-b123179a6255","fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"next":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}}},{"node":{"id":"b911ff27-f1bd-5dbd-8d55-bc836c9d0864","fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"next":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"previous":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}}},{"node":{"id":"868b483d-2cde-508c-8978-327a3f734203","fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"previous":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}}},{"node":{"id":"f22af0ac-f3e5-5cc1-b552-8c66b6026112","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"previous":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}}},{"node":{"id":"569f7ab2-0c83-5683-81fa-21c69fd5117a","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}}},{"node":{"id":"9abaf084-569e-53db-970a-42f6b1961c26","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}}},{"node":{"id":"2b4b8b24-8bac-5d6e-b8be-be93abf830a3","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}}},{"node":{"id":"c3a9a179-8a04-5767-b325-56f39a3a8173","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"next":null,"previous":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"af531f3a-b7d2-5c9e-ad22-e8378a078f07"}}}