1

基本的なアニメーションを実行していますが、自由に開始および停止できるようにしたいと考えています。できれば、単純な関数と、なし/制限付きのjqueryを使用します。

これまでのところ、プレイ状態を「一時停止」から「実行中」に切り替えていましたが、これは機能していません-アイデア？

これはこれまでの私のコードです：

HTML：

<div id="Arena"></div>
<div id="PlayButton" class="Button" onClick="onclick = AnimationStart"></div>

Javascript：

var AnimationStart;

var AnimationStart = function(){
    document.getElementById('Arena').style.animationPlayState="running";
    alert("The onclick is working!");
}

CSS：

    <style type="text/css">

#Arena{
    color:#FFF;
    width:400px;
    height:300px;
    animation-iteration-count:infinite;
    animation-play-state:paused;
    animation:colorchange 20s;
    -moz-iteration-count:infinite;
    -ms-iteration-count:infinite;
    -o-iteration-count:infinite;
    -webkit-iteration-count:infinite;
    -moz-play-state:paused;
    -ms-play-state:paused;
    -o-play-state:paused;
    -webkit-animation-play-state:paused;
    -moz-animation:colorchange 20s;
    -ms-animation:colorchange 20s;
    -o-animation:colorchange 20s;
    -webkit-animation:colorchange 20s;
}

@keyframes colorchange{
    0%{background:#FFF;}
    5%{background:#000;}
    10%{background:#FFF;}
    15%{background:#000;}
    20%{background:#FFF;}
    25%{background:#000;}
    30%{background:#FFF;}
    35%{background:#000;}
    40%{background:#FFF;}
    45%{background:#000;}
    50%{background:#FFF;}
    55%{background:#000;}
    60%{background:#FFF;}
    65%{background:#000;}
    70%{background:#FFF;}
    75%{background:#000;}
    80%{background:#FFF;}
    85%{background:#000;}
    90%{background:#FFF;}
    95%{background:#000;}
    100%{background:#FFF;}                              
}

@-moz-keyframes colorchange{
    0%{background:#FFF;}
    25%{background:#000;}
    50%{background:#FFF;}
    75%{background:#000;}
    100%{background:#FFF;}
}

@-webkit-keyframes colorchange{

        0%{background:#FFF;}
    5%{background:#000;}
    10%{background:#FFF;}
    15%{background:#000;}
    20%{background:#FFF;}
    25%{background:#000;}
    30%{background:#FFF;}
    35%{background:#000;}
    40%{background:#FFF;}
    45%{background:#000;}
    50%{background:#FFF;}
    55%{background:#000;}
    60%{background:#FFF;}
    65%{background:#000;}
    70%{background:#FFF;}
    75%{background:#000;}
    80%{background:#FFF;}
    85%{background:#000;}
    90%{background:#FFF;}
    95%{background:#000;}
    100%{background:#FFF;}
}

@-ms-keyframes colorchange{
    0%{background:#FFF;}
    50%{background:#000;}
    100%{background:#FFF;}
}

@-o-keyframes colorchange{
    0%{background:#FFF;}
    50%{background:#000;}
    100%{background:#FFF;}
}
4

1 に答える 1

1

onClick="onclick = AnimationStart"する必要がありますonClick="AnimationStart()"

于 2012-11-09T04:55:53.137 に答える