Problem with a CSS and javascript slide in Chrome_问答_开发者

I'm building a website that will teach children from 1 to 6 years old how to write.

The core of the learning method is a slide of words. I made it with CSS and javascript.

Everything works fine in Safari (including iPhone and iPad) but I can't see the slide in Chrome.

I'm a rookie developer and I can't find the problem.

This is a free project and there's a lot of people that can't use the website without downloading Safari or Firefox.

I appreciate any kind of help.

The link: http://www.rojasandco.com/castellano/empecemos.html

The code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="12;URL=../empecemos.html#semana14">
<title>Prueba02 &middot; Made with Sencha Animator</title>
<script type="text/javascript">
function setConfig(configObject) {
    config = configObject;

    //get ol list and children
    var ol = document.body.getElementsByTagName('ol')[0];
    scenes = ol.children;

    currentSceneIndex = -1;
}


function start() {  
    goToScene(0);
}

function goToSceneID(id) {
    for (var i=0; i < config.length; i++) {
        if (config[i].id === id) {
            goToScene(i);
            return;
        }
    }
}


//function to go directly to any scene
function goToScene(index) {

    //go to scene
    startScene(index);

    //set up timer if jumping on done
    if (config[index].jump !== -1) {
        applyTimeout(config[index].jump, config[index].duration);
    }

}

function startScene(index) {

    //restart current scene without flicker
    if (index === currentSceneIndex) {
        scenes[index].setAttribute('class','run restart');
        setTimeout(function(){
            开发者_运维技巧scenes[index].setAttribute('class','run');
            },0);
        return;
    }

    //add the class "run" to the scene currently running and remove it from anybody else
    var scene;
    for (var i=0; i < scenes.length; i++) {
        scene = scenes[i];
        if (i === index) {
            scene.setAttribute('class','run');
        } else {
            scene.setAttribute('class','');
        }

    }

    currentSceneIndex = index;

}

//set timeout
function applyTimeout(index,time) {
    setTimeout(function(){
        goToScene(index);
    },time);
}
</script><script type="text/javascript">
window.onload=setup;
function setup() {
setConfig([{"jump":-1,"duration":11250,"id":0}]);
start();
}
</script>
<style type="text/css">
.AN-sObj-stage {
    position: relative;
    overflow:hidden;
    -webkit-perspective: 600;
    -webkit-transform-style:preserve-3d;
    margin: 0px auto;
}
.AN-sObj-stage div {
    position: absolute;
}
.AN-sObj-stage a {
    color: inherit;
    text-decoration:none;
}
.AN-sObj-stage * {
    margin:0;
    padding:0;
    -webkit-font-smoothing: antialiased;
}
body, .AN-sObj-stage, ol, li {
    margin:0;
    padding:0;
}
ol {
    list-style:none;
    position:relative;
}
li {
    position:absolute;
    top:0;
    left:0;
}
li {
    display:none;
}
li.run {
    display:block;
}
.restart * {
    -webkit-animation-name: none !important;
}
.AN-sObj-stage {
    height: 768px;
    width: 1024px;
    background-color: rgba(255,255,255,1);
    margin: 0px auto;
}
#AN-sObj-2 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    width: 100px;
    height: 100px;
    top:0;
    left:0;
}
#AN-sObj-4 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    width: 1024px;
    height: 768px;
    top:0;
    left:0;
}
#AN-sObj-5 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    width: 1024px;
    height: 768px;
    top:0;
    left:0;
}
#AN-sObj-6 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    width: 1024px;
    height: 768px;
    top:0;
    left:0;
}
#AN-sObj-7 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    width: 1024px;
    height: 768px;
    top:0;
    left:0;
}
#AN-sObj-8 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    width: 1024px;
    height: 768px;
    top:0;
    left:0;
}
div {
    width:1024px;
    height:768px;
    margin: 0px auto;
}
 @-webkit-keyframes AN-ani-3 {
0% {
-webkit-transform: translate3d(10px, 10px, 0px);
}
100% {
-webkit-transform: translate3d(10px, 10px, 0px);
}
}
.run #AN-sObj-2 {
    -webkit-animation-name: AN-ani-3;
    -webkit-animation-duration: 11s;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: both;
}
.restart #AN-sObj-2 {
    -webkit-transform: translate3d(10px, 10px, 0px);
}
@-webkit-keyframes AN-ani-9 {
0% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
98.04% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
99.02% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
100% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 0;
}
}
.run #AN-sObj-8 {
    -webkit-animation-name: AN-ani-9;
    -webkit-animation-duration: 1.02s;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: both;
}
.restart #AN-sObj-8 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    opacity: 1;
}
@-webkit-keyframes AN-ani-10 {
0% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
99.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
100% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 0;
}
}
.run #AN-sObj-7 {
    -webkit-animation-name: AN-ani-10;
    -webkit-animation-duration: 1.0099999999999998s;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: both;
}
.restart #AN-sObj-7 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    opacity: 1;
}
@-webkit-keyframes AN-ani-11 {
0% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
99.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
100% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 0;
}
}
.run #AN-sObj-6 {
    -webkit-animation-name: AN-ani-11;
    -webkit-animation-duration: 1.0099999999999998s;
    -webkit-animation-delay: 5s;
    -webkit-animation-fill-mode: both;
}
.restart #AN-sObj-6 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    opacity: 1;
}
@-webkit-keyframes AN-ani-12 {
0% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
99.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
100% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 0;
}
}
.run #AN-sObj-4 {
    -webkit-animation-name: AN-ani-12;
    -webkit-animation-duration: 1.0099999999999998s;
    -webkit-animation-delay: 9s;
    -webkit-animation-fill-mode: both;
}
.restart #AN-sObj-4 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    opacity: 1;
}
@-webkit-keyframes AN-ani-13 {
0% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
99.01% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 1;
}
100% {
-webkit-transform: translate3d(10px, 10px, 0px);
opacity: 0;
}
}
.run #AN-sObj-5 {
    -webkit-animation-name: AN-ani-13;
    -webkit-animation-duration: 1.0099999999999998s;
    -webkit-animation-delay: 7s;
    -webkit-animation-fill-mode: both;
}
.restart #AN-sObj-5 {
    -webkit-transform: translate3d(10px, 10px, 0px);
    opacity: 1;
}
</style>
</head>
<body>
<div>
  <ol>
    <li id="scene-0">
      <div class="AN-sObj-stage" id="ext-gen7487">
        <div id="AN-sObj-2"></div>
        <div class="AN-Object" id="AN-sObj-4">
          <div id="AN-sObj-val-4"><img src="animacion/assets/60d.png"></div>
        </div>
        <div class="AN-Object" id="AN-sObj-5">
          <div id="AN-sObj-val-5"><img src="animacion/assets/60c.png"></div>
        </div>
        <div class="AN-Object" id="AN-sObj-6">
          <div id="AN-sObj-val-6"><img src="animacion/assets/60a.png"></div>
        </div>
        <div class="AN-Object" id="AN-sObj-7">
          <div id="AN-sObj-val-7"><img src="animacion/assets/60e.png"></div>
        </div>
        <div class="AN-Object" id="AN-sObj-8">
          <div id="AN-sObj-val-8"><img src="animacion/assets/60b.png"></div>
        </div>
      </div>
    </li>
  </ol>
</div>
</body>
</html>

You should consider using jQuery for mature, cross-browser tested animations