Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
add comment

1 Answer

up vote 2 down vote

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.