cross-browser - CSS 动画未在 Safari 中完全显示

Question

所以我是使用 CSS 动画的新手，我想我会四处学习它。我可以在 Chrome 中显示所有内容并正常工作，但如果是 FF 和 Safari，我很难让它正确显示。（在 FF 中，前景动画不起作用，而在 Safari 中，只有旋转起作用。）

我的 HTML 是基本的：

<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>

还有我的 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%;} 
}

谢谢你的帮助！

cross-browser - CSS 动画未在 Safari 中完全显示

0 回答 0

Related

Reference