2

私は単一ページの Web サイトを構築しており、そのサイトのセクションに CSS アニメーションがあります。

.animation {
    background-color: #54a3f7;
    -webkit-animation: html 2s ease-in-out;
}

で設定

@-webkit-keyframes html {
   0% { width: 0%;} 
   100% { width: 100%; }
}

ここに実際の例があります: http://jsfiddle.net/RqH5H/

私の問題は、このアニメーションは（もちろん）ウィンドウの読み込み時に開始されることですが、ユーザーがトップメニューをクリックして見たいときに開始したい<section id="animations"> ので、ユーザーが「アニメーション」をクリックすると、そのセクションまでスクロールダウンしますアニメーション開始時

4

2 に答える 2

3

これを実現するには Javascript が必要です。クリック時の CSS アニメーション (または任意のインタラクション イベント) へのポイントをクラスに追加できます。デモ用に基本的な JSFiddle をまとめました。

注: jQuery を使用します。

http://jsfiddle.net/zensign/sg9ty/1/

$('#start-btn').click(function () {
     $('#animate-me').addClass('animation');
});
于 2013-07-22T21:22:20.333 に答える
-1

これはどうですか？

    .animation {
    height: 40px;
    width: 100%;
}
.animation:hover {
     background-color: #54a3f7;
    -webkit-animation: animation 2s ease-in-out;
    -moz-animation: animation 2s ease-in-out;
}

@-webkit-keyfram``es animation { 0% { width: 0%;}  100% { width: 100%; }}
@-mox-keyframes animation { 0% { width: 0%;}  100% { width: 100%; }}

これを ur jsfiddle html に置き換えます。

于 2013-07-22T20:44:45.730 に答える