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

Popular posts from this blog

php - Permission denied. Laravel linux server -

when try register , send email user got error. working till yesterday. today gives me , cant figure out why. way on local testing work's. i'm stuck. please errorexception in compiled.php line 7512: file_put_contents(/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php): failed open stream: permission denied in compiled.php line 7512 @ handleexceptions->handleerror('2', 'file_put_contents(/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php): failed open stream: permission denied', '/var/www/html/bootstrap/cache/compiled.php', '7512', array('path' => '/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php', 'contents' => 'please activate account clicking on following link. <a href="<?php echo e(route('auth.activate', $token)); ?>"><?php echo e(route('auth.activate', $token)); ?
Read more

google bigquery - Delta between query execution time and Java query call to finish -

context our container cluster located @ us-east1-c we using following java library: google-cloud-bigquery, 0.9.2-beta our dataset has around 26m rows , represents ~10g all of our queries return less 100 rows grouping on specific column question we analyzed last 100 queries executed in bigquery, these executed in 2-3 seconds (we analyzed calling bq --format=prettyjson show -j jobid , end time - creation time). in our java logs though, of calls bigquery.query blocking 5-6 seconds (and 10 seconds not out of ordinary). explain systematic gap between query finish in bigquery cluster , results being available in java? know 5-6 seconds isn't astronomic, curious see if normal behaviour when using java bigquery cloud library. i didn't dig point analyzed outbound call using wireshark. our tests executed in our container cluster (kubernetes). code queryrequest request = queryrequest.newbuilder(sql) .setmaxwaittime(30000l) .setuselega
Read more

python - Pandas two dataframes multiplication? -

i have 2 data frames (a , b) a: column 1, column 2, column 3 0.1 0.5 0.7 b: row 1 5 row 2 6 row 3 7 how perform multiplication like (0.1)*5, (0.5)* 6, , (0.7)*7? in other words, how multiply value in first row of b value in first column of a, second row of b value in second column of b, , etc? you want multiply values without respect whether rows or columns. pd.series(a.values.ravel() * b.values.ravel()) 0 0.5 1 3.0 2 4.9 dtype: float64
Read more