javascript - Animated Double Arrow - CSS -
please read problem carefully. i've passed 2 days, still, can't figure out.
if go here http://thekitchen.com you'll see animated double arrow http://prntscr.com/ewcvn4
i've searched many times on internet , copied code, it's not working.
has there way make similar animated double arrow?
also, need animation of site. know animate css , wow js. can't iterate animation. how can implement animation in site?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>svg animation</title> <style> body{ background-color: green; } .narrative-inner-slide-cta{ position: absolute } .narrative-inner-slide-cta { list-style: none; display: -ms-flexbox; display: -webkit-flex; display: flex } .narrative-inner-slide-cta { -ms-flex-align: center; -webkit-align-items: center; align-items: center } .narrative-inner-slide-cta { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column } .narrative-inner-slide-cta { bottom: 3rem; left: 0; right: 0; width: 5rem; margin-right: auto; margin-left: auto; opacity: 0 } .narrative-inner-slide-cta { -moz-animation: show-slide-cta .5s ease-in-out forwards .7s; -webkit-animation: show-slide-cta .5s ease-in-out forwards .7s; animation: show-slide-cta .5s ease-in-out forwards .7s } .arrowcta { bottom: 0; background-color: transparent; color: #3a261e; position: absolute; left: 0; right: -3px; margin-right: auto; margin-left: auto; width: .2rem; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg) } .arrowcta--alt{ color: #fff } .arrowcta:after, .arrowcta:before { border-right: 3px solid #3a261e; border-bottom: 3px solid #3a261e; border-left: 0 solid transparent; border-top: 0 solid transparent; top: 0; left: 0; opacity: 1; -webkit-font-smoothing: antialiased; height: .75rem; width: .75rem } @media screen , (min-width: 40.0625em) { .arrowcta:after, .arrowcta:before { height: 1.125rem; width: 1.125rem; bottom: 1.125rem } } .arrowcta:before { -moz-animation: top-arrow 2s infinite; -webkit-animation: top-arrow 2s infinite; animation: top-arrow 2s infinite } .arrowcta:after { -moz-animation: bottom-arrow 2s infinite; -webkit-animation: bottom-arrow 2s infinite; animation: bottom-arrow 2s infinite } .arrowcta--alt:after, .arrowcta--alt:before { border-right: 3px solid #fff; border-bottom: 3px solid #fff } .arrowcta:after, .arrowcta:before{ display: block; position: absolute; } .arrowcta--alt:after, .arrowcta--alt:before, .arrowcta:after, .arrowcta:before { content: "" } </style> </head> <body> <div class="narrative-inner-slide-cta"> <button class="arrowcta arrowcta--alt"></button> </div> </body> </html>
you missing important css able animate want. here is, created jsfiddle - check out...
<button class="arrowcta arrowcta--alt "></button>
Comments
Post a Comment