Problem with a CSS and javascript slide in Chrome

2023-03-27 08:32 问答作者：

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

继续阅读：css google-chrome javascript

Problem with a CSS and javascript slide in Chrome

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？