だから私は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%;}
}
ご協力いただきありがとうございます！