html - :after pseudo element animation working in IE & Firefox, not Chrome -


using divi theme wordpress

what i'm trying animated dandelion image (see snippet). animation works fine in ie , firefox, not working in chrome.

the image replacing font-icon, '7' wrapped in span element. replaced span's content dandelion image, content url not show in firefox. have have "click scroll' text in :before pseudo element, why had use :after pseudo element.

i should note don't have ability manually change inside span element, have use css override it's contents.

what can animation work in chrome?

live version: http://gardenviewcare.wpengine.com/adult-day-center/ 

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:before {    content: "click scroll";    display: block;    color: rgba(255, 255, 255, 0.75);    text-transform: uppercase;    letter-spacing: 1px;    font-size: 11px;    width: 80px;    line-height: 1;    margin-bottom: 10px;  }    span.scroll-down.et-pb-icon {    display: none;  }    .et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:after {    content: url('http://gardenviewcare.wpengine.com/wp-content/uploads/2017/07/dandelion-icon.png') !important;    animation: swing 15s linear infinite;    transform: rotate(0);    transform-style: preserve-3d;  }    @keyframes swing {    0% {      transform: rotate(0);    }    25% {      transform: rotatex(15deg) rotatey(15deg) rotatez(15deg);    }    50% {      transform: rotatex(-15deg) rotatey(-20deg);    }    75% {      transform: rotatex(15deg) rotatey(10deg) rotatez(-15deg);    }    100% {      transform: rotatex(-10deg) rotatey(-5deg);    }  }      /** snippet sake can see icon, white **/    body {    background: #60bb46;  }
<link href="http://gardenviewcare.wpengine.com/wp-content/themes/divi-child-01/style.css" rel="stylesheet" />  <link href="http://gardenviewcare.wpengine.com/wp-content/themes/divi/style.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <section class="et_pb_fullwidth_header et_pb_section_parallax et_pb_module et_pb_bg_layout_dark et_pb_text_align_center  et_pb_fullwidth_header_0">      <div class="et_pb_fullwidth_header_scroll" style="opacity: 1;"><a href="#"><span class="scroll-down et-pb-icon">7</span></a></div>  </section>

add display: block ::after element.

the official w3 specifications defines transformable element as:

an element layout governed css box model either block-level or atomic inline-level element, or ‘display’ property computes ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’ [css21]

(borrowed answer: https://stackoverflow.com/a/14883287/4573410)

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:before {    content: "click scroll";    display: block;    color: rgba(255, 255, 255, 0.75);    text-transform: uppercase;    letter-spacing: 1px;    font-size: 11px;    width: 80px;    line-height: 1;    margin-bottom: 10px;  }    span.scroll-down.et-pb-icon {    display: none;  }    .et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:after {    content: url('http://gardenviewcare.wpengine.com/wp-content/uploads/2017/07/dandelion-icon.png') !important;    animation: swing 15s linear infinite;    transform: rotate(0);    transform-style: preserve-3d;    display: block;  }    @keyframes swing {    0% {      transform: rotate(0);    }    25% {      transform: rotatex(15deg) rotatey(15deg) rotatez(15deg);    }    50% {      transform: rotatex(-15deg) rotatey(-20deg);    }    75% {      transform: rotatex(15deg) rotatey(10deg) rotatez(-15deg);    }    100% {      transform: rotatex(-10deg) rotatey(-5deg);    }  }      /** snippet sake can see icon, white **/    body {    background: #60bb46;  }
<section class="et_pb_fullwidth_header et_pb_section_parallax et_pb_module et_pb_bg_layout_dark et_pb_text_align_center  et_pb_fullwidth_header_0">      <div class="et_pb_fullwidth_header_scroll" style="opacity: 1;"><a href="#"><span class="scroll-down et-pb-icon">7</span></a></div>  </section>


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more