CSS动画不适用于野生动物园或歌剧

Question

I have a problem getting the animations on my site to work for safari and opera. I've used all the prefixes everywhere and I've researched about this a lot to make sure my code is correct, however there must be something I am still missing. Please, look at code below and give me some advice on how to proceed.

@-webkit-keyframes moves {
from {
    transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    } to {
    transform: translate(-45%, -100%);
    -webkit-transform: translate(-45%, -100%);
    -o-transform: translate(-45%, -100%);
    -moz-transform: translate(-45%, -100%);
    }}
@-moz-keyframes moves {
from {
    transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    } to {
    transform: translate(-45%, -100%);
    -webkit-transform: translate(-45%, -100%);
    -o-transform: translate(-45%, -100%);
    -moz-transform: translate(-45%, -100%);
    }}
@-o-keyframes moves {
from {
    transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    } to {
    transform: translate(-45%, -100%);
    -webkit-transform: translate(-45%, -100%);
    -o-transform: translate(-45%, -100%);
    -moz-transform: translate(-45%, -100%);
    }}
@keyframes moves {
from {
    transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    } to {
    transform: translate(-45%, -100%);
    -webkit-transform: translate(-45%, -100%);
    -o-transform: translate(-45%, -100%);
    -moz-transform: translate(-45%, -100%);
    }}

This is how I call my animations:

    .move {
-webkit-animation: moves 4s 2.5s forwards;
-moz-animation:    moves 4s 2.5s forwards;
-o-animation:    moves 4s 2.5s forwards;
animation:    moves 4s 2.5s forwards;}

Finally, I call these animations on document load with Jquery by adding this class to the desired div or section.

Problem is, my animations work perfectly with mozilla and chrome,only partially with opera, and almost none of my animations work in safari. Oh, also my document load Jquery doesn't seem to be working for Opera - it is just starting the animations that do work before the full page is loaded.

Answer 1

It's working for me in Safari and Chrome right now (don't feel like downloading Opera atm). You're using a lot of vendor prefixes in areas where you only need one ^_^ :

https://jsfiddle.net/JTBennett/egfw1392/

@keyframes moves {
from {
    transform: translate(0px,0px);
    } to {
    transform: translate(-45%, -100%);
    }}
@-webkit-keyframes moves {
from {
    -webkit-transform: translate(0px,0px);
    } to {
    -webkit-transform: translate(-45%, -100%);
    }}
@-moz-keyframes moves {
from {
    -moz-transform: translate(0px,0px);
    } to {
    -moz-transform: translate(-45%, -100%);
    }}
@-o-keyframes moves {
from {
    -o-transform: translate(0px,0px);
    } to {
    -o-transform: translate(-45%, -100%);
    }}
@-ms-keyframes moves {
    from {
        -ms-transform: translate(0,0);
    } to {
        -ms-transform: translate(-45%,-100%);
    }}




.moves {
-webkit-animation: moves 4s 2.5s forwards;
-moz-animation:    moves 4s 2.5s forwards;
-o-animation:    moves 4s 2.5s forwards;
animation:    moves 4s 2.5s forwards;}

Then just assign your class to desired element. Hope that solves everything!

-Joel