cross browser - CSS Animations not fully displaying in safari -


so i'm new using css animations , thought i'd play around learn it. can displayed , working fine in chrome i'm having difficulty getting display if ff , safari. (in ff foreground animation doesn't work , in safari rotate works.)

my html basic:

<html>     <head>         <title>happy birthday!</title>               <link rel="stylesheet" href="styles.css" media="all" />     </head>     <body>      <div class="wrapper">         <div class="carebear"></div>     </div>     <div class="foreground"></div>     <div class="midground"></div>     <div class="background"></div>     </body> </html>

and css:

    html {     background: url('bg.jpg') 0 100% repeat-x;     width:100%;     height: 100%;  } .carebear {     background: url('care3.png')0 0 no-repeat;     width: 295px;     height: 274px;     -webkit-animation: float 1.8s linear infinite both;     -moz-animation: float 1.8s linear infinite both;     -o-animation: float 1.8s linear infinite both;     animation: float 1.8s linear infinite both;     -webkit-transform-origin: top center;     -moz-transform-origin: top center;     -o-transform-origin: top center;     transform-origin: top center; } @-webkit-keyframes float {     0%{-webkit-transform: rotate(0deg);         -moz-transform: rotate(0deg);         -o-transform: rotate(0deg);         transform: rotate(0deg);         }     25%{-webkit-transform: rotate(13deg);         -moz-transform: rotate(13deg);         -o-transform: rotate(13deg);         transform: rotate(13deg);     }     75%{-webkit-transform: rotate(-12deg);         -moz-transform: rotate(-12deg);         -o-transform: rotate(-12deg);         transform: rotate(-12deg);     } } @-moz-keyframes float {     0%{-webkit-transform: rotate(0deg);         -moz-transform: rotate(0deg);         -o-transform: rotate(0deg);         transform: rotate(0deg);         }     25%{-webkit-transform: rotate(13deg);         -moz-transform: rotate(13deg);         -o-transform: rotate(13deg);         transform: rotate(13deg);     }     75%{-webkit-transform: rotate(-12deg);         -moz-transform: rotate(-12deg);         -o-transform: rotate(-12deg);         transform: rotate(-12deg);     } } @-o-keyframes float {     0%{-webkit-transform: rotate(0deg);         -moz-transform: rotate(0deg);         -o-transform: rotate(0deg);         transform: rotate(0deg);         }     25%{-webkit-transform: rotate(13deg);         -moz-transform: rotate(13deg);         -o-transform: rotate(13deg);         transform: rotate(13deg);     }     75%{-webkit-transform: rotate(-12deg);         -moz-transform: rotate(-12deg);         -o-transform: rotate(-12deg);         transform: rotate(-12deg);     } } @keyframes float {     0%{-webkit-transform: rotate(0deg);         -moz-transform: rotate(0deg);         -o-transform: rotate(0deg);         transform: rotate(0deg);         }     25%{-webkit-transform: rotate(13deg);         -moz-transform: rotate(13deg);         -o-transform: rotate(13deg);         transform: rotate(13deg);     }     75%{-webkit-transform: rotate(-12deg);         -moz-transform: rotate(-12deg);         -o-transform: rotate(-12deg);         transform: rotate(-12deg);     } } .wrapper {     -webkit-animation: move 10s ease-in-out infinite both;     -moz-animation: move 10s ease-in-out infinite both;     -o-animation: move 10s ease-in-out infinite both;     animation: move 10s ease-in-out infinite both;     position: absolute;     top: 15%;     left: 25%;     z-index: 3; }  @-webkit-keyframes move {     0%{-webkit-transform: translate(0px 50px);         -moz-transform: translate(0px 50px);         -o-transform: translate(0px 50px);         transform: translate(0px 50px);     }     25%{-webkit-transform: translatex(-50px);         -moz-transform: translatex(-50px);         -o-transform: translatex(-50px);         transform: translatex(-50px);     }     45%(-webkit-transform: translatey(100px);         -moz-transform: translatey(100px);         -o-transform: translatey(100px);         transform: translatey(100px);     )     65%{-webkit-transform: translatey(0px);         -moz-transform: translatey(0px);         -o-transform: translatey(0px);         transform: translatey(0px);          }     75%{-webkit-transform: translatex(200px);         -moz-transform: translatex(200px);         -o-transform: translatex(200px);         transform: translatex(200px);     } } @-moz-keyframes move {     0%{-webkit-transform: translate(0px 50px);         -moz-transform: translate(0px 50px);         -o-transform: translate(0px 50px);         transform: translate(0px 50px);     }     25%{-webkit-transform: translatex(-50px);         -moz-transform: translatex(-50px);         -o-transform: translatex(-50px);         transform: translatex(-50px);     }     45%(-webkit-transform: translatey(100px);         -moz-transform: translatey(100px);         -o-transform: translatey(100px);         transform: translatey(100px);     )     65%{-webkit-transform: translatey(0px);         -moz-transform: translatey(0px);         -o-transform: translatey(0px);         transform: translatey(0px);       }     75%{-webkit-transform: translatex(200px);         -moz-transform: translatex(200px);         -o-transform: translatex(200px);         transform: translatex(200px);     } } @-o-keyframes move {     0%{-webkit-transform: translate(0px 50px);         -moz-transform: translate(0px 50px);         -o-transform: translate(0px 50px);         transform: translate(0px 50px);     }     25%{-webkit-transform: translatex(-50px);         -moz-transform: translatex(-50px);         -o-transform: translatex(-50px);         transform: translatex(-50px);     }     45%(-webkit-transform: translatey(100px);         -moz-transform: translatey(100px);         -o-transform: translatey(100px);         transform: translatey(100px);     )     65%{-webkit-transform: translatey(0px);         -moz-transform: translatey(0px);         -o-transform: translatey(0px);         transform: translatey(0px);       }     75%{-webkit-transform: translatex(200px);         -moz-transform: translatex(200px);         -o-transform: translatex(200px);         transform: translatex(200px);     } } @keyframes move {     0%{-webkit-transform: translate(0px 50px);         -moz-transform: translate(0px 50px);         -o-transform: translate(0px 50px);         transform: translate(0px 50px);     }     25%{-webkit-transform: translatex(-50px);         -moz-transform: translatex(-50px);         -o-transform: translatex(-50px);         transform: translatex(-50px);     }     45%(-webkit-transform: translatey(100px);         -moz-transform: translatey(100px);         -o-transform: translatey(100px);         transform: translatey(100px);     )     65%{-webkit-transform: translatey(0px);         -moz-transform: translatey(0px);         -o-transform: translatey(0px);         transform: translatey(0px);       }     75%{-webkit-transform: translatex(200px);         -moz-transform: translatex(200px);         -o-transform: translatex(200px);         transform: translatex(200px);     } } .foreground, .midground, .background {   width: 100%;   height: 100%;   position: absolute;   bottom: 0; left: 0; } .foreground {   -webkit-animation: parallax_fg linear 10s infinite both;   -moz-animation: parallax_fg linear 10s infinite both;   -o-animation: parallax_fg linear 10s infinite both;   animation: parallax_fg linear 10s infinite both;   background:  url('cloud-front.png') 0 100% repeat-x;   z-index: 4; } @-webkit-keyframes parallax_fg {     100% { background-position-x: -2400px;}    0% {background-position-x:  0px; }  } @-moz-keyframes parallax_fg {     100% { background-position-x: -2400px;}    0% {background-position-x:  0px; }  } @-o-keyframes parallax_fg {     100% { background-position-x: -2400px;}    0% {background-position-x:  0px; }  } @keyframes parallax_fg {     100% { background-position-x: -2400px;}    0% {background-position-x:  0px; }  } .midground {     -webkit-animation: parallax_mg linear 20s infinite;     -moz-animation: parallax_mg linear 20s infinite;     -o-animation: parallax_mg linear 20s infinite;     animation: parallax_mg linear 20s infinite;     background:  url('cloud-middle2.png') 0 100% repeat-x;     z-index: 2; } @-webkit-keyframes parallax_mg {     100% { background-position: -2000px 100%;}    0% {background-position: 0 100%; }  } @-moz-keyframes parallax_mg {     100% { background-position: -2000px 100%;}    0% {background-position: 0 100%; }  } @-o-keyframes parallax_mg {     100% { background-position: -2000px 100%;}    0% {background-position: 0 100%; }  } @keyframes parallax_mg {     100% { background-position: -2000px 100%;}    0% {background-position: 0 100%; }  } .background {   background-image:     url('bg.jpg');     background-repeat: repeat-x;     background-position: 0 100%;     z-index: 1;     -webkit-animation: parallax_bg linear 40s infinite;     -moz-animation: parallax_bg linear 40s infinite;     -o-animation: parallax_bg linear 40s infinite;     animation: parallax_bg linear 40s infinite;     } @-webkit-keyframes parallax_bg {     100% { background-position: -1920px 100%;}    0% {background-position: 0 100%;}  } @-moz-keyframes parallax_bg {     100% { background-position: -1920px 100%;}    0% {background-position: 0 100%;}  } @-o-keyframes parallax_bg {     100% { background-position: -1920px 100%;}    0% {background-position: 0 100%;}  } @keyframes parallax_bg {     100% { background-position: -1920px 100%;}    0% {background-position: 0 100%;}  }

thanks help!


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more