1

CSS3 アニメーションだけで達成できると思っている質問がありますが、jQuery アニメーションの使用が必要な場合は、それも問題ありません。:]

無限ループで右から左にスライドする雲のイメージがあります。これはうまく機能し、CSS3 アニメーションが大好きですが、それらに垂直アニメーションを追加する方法についての情報が見つかりません。

これにより、雲の画像がわずかに上下に移動することが可能である場合、ランダムに移動することが可能であり、まっすぐにスライドするだけでなく、それは壮大です. 私は CSS3 アニメーションに慣れていないので、少し読みましたkeyframesが、ベースのキーフレームを数回試し%ましたが、それらを機能させることに成功していません。

これは私がする必要があることですか、それとも私の目的の効果のためにjQueryを使用するのが最善でしょうか.

CSS

.clouds {
    width: 20em;
    position: absolute;
    top: 1em;
    -webkit-animation-name: Clouds;
    -webkit-animation-duration: 50s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: Clouds;
    -moz-animation-duration: 50s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: Clouds;
    -ms-animation-duration: 50s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;
}

@media only screen and (max-width: 680px) {
  .clouds {
    width: 25%;
    top: 3em;
  }
}

/* Clouds CSS3 animations */

@-webkit-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-moz-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-ms-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}

/* End Clouds CSS3 Animation */

JSFIDDLE

これに関するご意見は大歓迎です。他に何か必要な場合はお知らせください。

私のポートフォリオリンク

4

1 に答える 1

2

%ベースのキーフレームは正常に機能するはずです: JSFIDDLE

わかりやすくするために、アニメーションを 2 つの部分に分割しました。

@-webkit-keyframes Clouds-h {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
    }
}

@-webkit-keyframes Clouds-v {
    from {
        top: 3em;
    }
    50% {
        top: 2em;
    }
    to {
        top: 3em;
    }
}

そして、それらを1行に入れます：

-webkit-animation: Clouds-h 50s linear infinite, Clouds-v 10s ease-in-out infinite;

このようにして、アニメーションを簡単にマージして複雑なアニメーションを作成できます。雲のサイズの 3 つ目のアニメーションを追加するようなものです。

于 2013-10-19T17:48:11.930 に答える