ボタンのクリックでCSSアニメーションのラジアルプログレスバーを作成

Question

これを達成しようとすると大きな問題がありました。私はどのように円で回転するように何かをアニメーション化する方法を理解していないので、私はCircle Progress Barから作業中のものを取得し、jqueryを使用してボタンクリックでアニメーション化する方法を見つけようとしています。 thisチュートリアルを試しましたが、正しく組み込む方法がわかりません。助けてください。ここには私のFiddleがありますが、それは動作に近づくことはありません。

.progress { 
    width:200px; 
    height:200px; 
    background:#fff; 
    border:2px solid #000; 
    position:relative; 
    margin:50px; 
    border-radius:50%; 
    overflow:hidden; 
    transform: translateZ(0px); 
    display:inline-block; 
} 
.activatedAfter { 
    -moz-animation:turn 4s linear forwards; 
    -webkit-animation:turn 4s linear forwards; 
    -moz-animation-delay:4s; 
    -webkit-animation-delay:4s; 

} 
.activated { 

    -moz-animation:turn 4s linear forwards; 
    -webkit-animation:turn 4s linear forwards; 
    -o-animation:turn 4s linear forwards; 
    -ms-animation:turn 4s linear forwards; 
    animation:turn 4s linear forwards; 


} 

@-moz-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@-webkit-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@-o-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@-ms-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 

Answer 1

「進歩」はクラスではなくIDであるので、私はあなたのフィドルに$('.progress')へ$('#progress')を変更しました。また、activatedAfterスタイルを、提供したリンクの例のactivated:afterスタイルとactivated:beforeスタイルに置き換えました。

また、私は

この

$('#battleButton').click(function() { 
 
\t $('.progress').addClass('activated activatedAfter'); 
 
});

body { 
 
    background-color: #000; 
 
} 
 

 
.progress { 
 
    width:200px; 
 
    height:200px; 
 
    background:#fff; 
 
    border:2px solid #000; 
 
    position:relative; 
 
    margin:50px; 
 
    border-radius:50%; 
 
    overflow:hidden; 
 
    transform: translateZ(0px); 
 
    display:inline-block; 
 
} 
 
.activated:after { 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    left:-50%; 
 
    background:tomato; 
 
    -moz-animation:turn 4s linear forwards; 
 
    -webkit-animation:turn 4s linear forwards; 
 
    -moz-animation-delay:4s; 
 
    -webkit-animation-delay:4s; 
 
    transform-origin:100% 50%; 
 
    z-index:1; 
 
} 
 
.activated:before { 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    left:50%; 
 
    background:tomato; 
 
    -moz-animation:turn 4s linear forwards; 
 
    -webkit-animation:turn 4s linear forwards; 
 
    -o-animation:turn 4s linear forwards; 
 
    -ms-animation:turn 4s linear forwards; 
 
    animation:turn 4s linear forwards; 
 
    transform-origin:0% 50%; 
 
    z-index:2; 
 
} 
 

 
@-moz-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@-webkit-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@-o-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@-ms-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 

 
button { 
 
    background-color: rgba(0, 0, 0, 0); 
 
    border-color: #81ff14; 
 
    color: #81ff14; 
 
    border-radius: 10%; 
 
    float: right; 
 
    margin-right: 100px; 
 
    margin-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress"></div> 
 
<button id="battleButton">Battle</button>

を試してみてください（それはあなたのフィドルに含まれていなかった）コードでjQueryライブラリを追加しました