html - CSS text wiggle animation no longer works on Chrome/Firefox but works on Edge -


this website in question : http://dilanianart.me/

i built 8 months ago (first website ever made) , had wiggle animation similar 1 shown here:

css text wiggle

the animation in link below working on 3 major browsers... know there wrong css code (though did not change since before).

the animation used work, logged on site , no longer working on webpage.

you can view source code browsing page since static website.

html:

<body>    <div id="wrapper">       <div id="header">          <a href=index.html>dilanianart.me</a>       </div>       <div id="nav">          <li><a href=info.html class="wiggle-me">info</a></li>          <li><a href=flora.html class="wiggle-me">flora</a></li>          <li><a href=legends.html class="wiggle-me">legends</a></li>          <li><a href=portraits.html class="wiggle-me">portraits</a></li>       </div>       <div id="content">          <div class="flexslider">             <ul class="slides">                <li>                   <img class="index" src="images/portraits/1.jpg" alt=" ">                </li>                <li>                   <img class="index" src="images/legends/2.jpg" alt=" ">                </li>                <li>                   <img class="index" src="images/flora/9.jpg" alt=" ">                </li>                <li>                   <img class="index" src="images/portraits/4.jpg" alt=" ">                </li>                <li>                   <img class="index" src="images/flora/2.jpg" alt=" ">                </li>             </ul>          </div>       </div>       <div id="footer">          <li>copyrights 1-1985043901 registered vau001195524</li>       </div>    </div> </body>

css:

@-ms-keyframes wiggle {    0% {       -ms-transform:rotate(2deg);    }    50% {       -ms-transform:rotate(-2deg);    }    100% {       -ms-transform:rotate(2deg);    } }  @-moz-keyframes wiggle {    0% {       -moz-transform:rotate(2deg);    }    50% {       -moz-transform:rotate(-2deg);    }    100% {       -moz-transform:rotate(2deg);    } }  @-webkit-keyframes wiggle {    0% {       -webkit-transform:rotate(2deg);    }    50% {       -webkit-transform:rotate(-2deg);    }    100% {       -webkit-transform:rotate(2deg);    } }  @keyframes wiggle {    0% {       transform:rotate(2deg);    }    50% {       transform:rotate(-2deg);    }    100% {       transform:rotate(2deg);    } }   a.wiggle-me:hover {    -ms-animation: wiggle .7s 30;    -moz-animation: wiggle .7s 30;    -webkit-animation: wiggle .7s 30;    animation: wiggle .7s 30; }

you missing vendor prefix webkit in keyframe:

@-webkit-keyframes wiggle {  0% {    -webkit-transform: rotate(2deg);  }  50% {    -webkit-transform: rotate(-2deg);  }   100% {     -webkit-transform: rotate(2deg);   } }

Comments

Post a Comment

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

Image
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page you need configure router config this: $stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { ...
Read more

python - GRASS parser() error -

i'm trying use grass on python 2.7, i'm having problems @ setting script on idle, i'm getting error @ parser() function: here script: import os import sys gisbase = os.environ['gisbase'] = 'c:\program files (x86)\grass gis 7.0.1rc1' gisrc = 'c:\grassdata' gisdbase = 'c:\grassdata' location = 'newlocation' mapset = 'tc' ld_library_path = 'c:\program files (x86)\grass gis 7.0.1rc1\lib' path = 'c:\program files (x86)\grass gis 7.0.1rc1\etc';'c:\program files (x86)\grass gis 7.0.1rc1\etc\python';'c:\program files (x86)\grass gis 7.0.1rc1\lib';'c:\program files (x86)\grass gis 7.0.1rc1\bin';'c:\python27';'c:\program files (x86)\grass gis 7.0.1rc1\python27';'c:\program files (x86)\grass gis 7.0.1rc1\msys' pythonlib = 'c:\python27' pythonpath = 'c:\program files (x86)\grass gis 7.0.1rc1\etc\python' sys.path.append(os.path.join(os.environ['...
Read more

json - Gson().fromJson(jsonResult, Myobject.class) return values in 0's -

Image
i have json {"fechaupdateid":1,"fechasegundos":635902782941643690,"fechasegundosbc":635902779020935030} i execute command convert object fechaupdate dto = new gson().fromjson(json, fechaupdate.class); but got result this fechaupdate class public class fechaupdate { public int getfechaupdateid() { return fechaupdateid; } public void setfechaupdateid(int fechaupdateid) { this.fechaupdateid = fechaupdateid; } public long getfechasegundosbc() { return fechasegundosbc; } public void setfechasegundosbc(long fechasegundosbc) { this.fechasegundosbc = fechasegundosbc; } public long getfechasegundos() { return fechasegundos; } public void setfechasegundos(long fechasegundos) { this.fechasegundos = fechasegundos; } private int fechaupdateid ; private long fechasegundos ; private long fechasegundosbc; } solved ...
Read more