1
慎重にお読みください。私は2日を過ごしましたが、まだ、私はそれを把握することはできません。あなたがここにhttp://thekitchen.comを行けばアニメーションのダブルアロー - CSS
あなたは、私がインターネット上で何度も検索し、そのコードをコピーしたhttp://prntscr.com/ewcvn4
二重矢印アニメーション表示されますが、それは働いていません。
類似のアニメーションの二重矢印を作る方法はありますか？
また、私はサイトのアニメーションが必要です。私はAnimate CSSとWOW JSについて知っています。しかし、アニメーションを繰り返すことはできません。だから私は自分のサイトでアニメーションを実装する方法は？
<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>SVG Animation</title>
\t <style>
\t \t body{
\t \t \t background-color: green;
\t \t }
\t \t .narrative-inner-slide-cta{
\t \t \t position: absolute
\t \t }
\t \t .narrative-inner-slide-cta {
\t \t list-style: none;
\t \t display: -ms-flexbox;
\t \t display: -webkit-flex;
\t \t display: flex
\t \t }
\t \t .narrative-inner-slide-cta {
\t \t -ms-flex-align: center;
\t \t -webkit-align-items: center;
\t \t align-items: center
\t \t }
\t \t .narrative-inner-slide-cta {
\t \t -ms-flex-direction: column;
\t \t -webkit-flex-direction: column;
\t \t flex-direction: column
\t \t }
\t \t .narrative-inner-slide-cta {
\t \t bottom: 3rem;
\t \t left: 0;
\t \t right: 0;
\t \t width: 5rem;
\t \t margin-right: auto;
\t \t margin-left: auto;
\t \t opacity: 0
\t \t }
\t \t .narrative-inner-slide-cta {
\t \t -moz-animation: show-slide-cta .5s ease-in-out forwards .7s;
\t \t -webkit-animation: show-slide-cta .5s ease-in-out forwards .7s;
\t \t animation: show-slide-cta .5s ease-in-out forwards .7s
\t \t }
\t \t .arrowCta {
\t \t bottom: 0;
\t \t background-color: transparent;
\t \t color: #3a261e;
\t \t position: absolute;
\t \t left: 0;
\t \t right: -3px;
\t \t margin-right: auto;
\t \t margin-left: auto;
\t \t width: .2rem;
\t \t -moz-transform: rotate(45deg);
\t \t -ms-transform: rotate(45deg);
\t \t -webkit-transform: rotate(45deg);
\t \t transform: rotate(45deg)
\t \t }
\t \t .arrowCta--alt{
\t \t color: #fff
\t \t }
\t \t .arrowCta:after,
\t \t .arrowCta:before {
\t \t border-right: 3px solid #3a261e;
\t \t border-bottom: 3px solid #3a261e;
\t \t border-left: 0 solid transparent;
\t \t border-top: 0 solid transparent;
\t \t top: 0;
\t \t left: 0;
\t \t opacity: 1;
\t \t -webkit-font-smoothing: antialiased;
\t \t height: .75rem;
\t \t width: .75rem
\t \t }
\t \t @media only screen and (min-width: 40.0625em) {
\t \t .arrowCta:after,
\t \t .arrowCta:before {
\t \t height: 1.125rem;
\t \t width: 1.125rem;
\t \t bottom: 1.125rem
\t \t }
\t \t }
\t \t .arrowCta:before {
\t \t -moz-animation: top-arrow 2s infinite;
\t \t -webkit-animation: top-arrow 2s infinite;
\t \t animation: top-arrow 2s infinite
\t \t }
\t \t .arrowCta:after {
\t \t -moz-animation: bottom-arrow 2s infinite;
\t \t -webkit-animation: bottom-arrow 2s infinite;
\t \t animation: bottom-arrow 2s infinite
\t \t }
\t \t .arrowCta--alt:after,
\t \t .arrowCta--alt:before {
\t \t border-right: 3px solid #fff;
\t \t border-bottom: 3px solid #fff
\t \t }
\t \t .arrowCta:after,
\t \t .arrowCta:before{
\t \t display: block;
\t \t position: absolute;
\t \t }
\t \t .arrowCta--alt:after,
\t \t .arrowCta--alt:before,
\t \t .arrowCta:after,
\t \t .arrowCta:before {
\t \t content: ""
\t \t }
\t </style>
</head>
<body>
\t <div class="narrative-inner-slide-cta">
<button class="arrowCta arrowCta--alt"></button>
</div>
</body>
</html>
あなたのコメントのために大変感謝しています。 内容（http://prntscr.com/ewe2s2）はhttp://thekitchen.com/にありますか？上から下にスクロールすると、内容はfadeInUpになります。下から上にスクロールすると、内容はfadeToBottomになります。 どうすればいいですか？ –
私はそれがanimate.cssとhttps://github.com/alvarotrigo/fullPage.js - フルページプラグインの組み合わせだと思います。私は別のプラグインと同様のレイアウトを行ったが、私が使ったものは忘れてしまった、それはずっと前だった。あなたはgithubページにアクセスしてチェックアウトすることができます。そして、あなたのために正しいものがありましたら、この回答に印を付けることを忘れないでください。 – Novakinify
それはAnimate CSS- https://jsfiddle.net/ThemePackNet/6bb3LLsy/なしで動いています:) –