buenas necesito su ayuda urgentemente la cosa es que quiero animar estos elementos pero no se como ayudemen!
Código HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = int;
function int() {
var canvas = document.getElementsByTagName('canvas');
for (var i = 0; i < canvas.length; i++) {
var obj = document.getElementById('skill-'+[i]);
var PPer = document.getElementById('skillP-'+[i]);
var per = obj.getAttribute('data-per');
PPer.innerHTML = per+'%';
var ctx = obj.getContext('2d');
ctx.lineWidth = 20;
var x = obj.width/2;
var y = obj.height/2;
var radius = 65;
var pi = Math.PI;
var grados = (per*360)/100;
var startAngle = pi * 1.5;
var endAngle = ((grados*pi)/180)-1.5707963267948966;
var anticlockwise = false;
ctx.beginPath();
ctx.arc(x, y, 75, pi*0, pi*2, anticlockwise);
ctx.arc(x, y, 55, pi*2, pi*0, true);
ctx.closePath();
ctx.fillStyle = 'rgb(170, 170, 170)';
ctx.fill();
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.arc(x, y, radius, endAngle, startAngle, true);
ctx.closePath();
ctx.strokeStyle = 'rgb(64, 118, 165)';
ctx.stroke();
}
if(false){
setTimeout(int,100);
}
}
</script>
<style type="text/css">
.skill {
width: 400px;
height: 400px;
text-align: right;
}
.skills {
margin: 0;
padding: 0;
display: inline-table;
float: left;
text-align: center;
width: 50%;
height: 50%;
}
#skillP-0,#skillP-1,#skillP-2,#skillP-3 {
position: absolute;
margin: 55px 0 0 80px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 32px;
font-weight: 200;
}
</style>
</head>
<body>
<div class="skill">
<div class="skills">
<h4></h4>
<p id="skillP-0"></p>
<canvas id="skill-0" width="150" height="150" data-per="25"></canvas>
</div>
<div class="skills">
<h4></h4>
<p id="skillP-1"></p>
<canvas id="skill-1" width="150" height="150" data-per="50"></canvas>
</div>
<div class="skills">
<h4></h4>
<p id="skillP-2"></p>
<canvas id="skill-2" width="150" height="150" data-per="75"></canvas>
</div>
<div class="skills">
<h4></h4>
<p id="skillP-3"></p>
<canvas id="skill-3" width="150" height="150" data-per="0"></canvas>
</div>
</div>
</body>
</html>