TuCuatro

Clock Metronome

@keyframes rotate {
100% {
transform: rotateZ(360deg);
}
}
@keyframes bounceIn {
0% {
transform: scale(1);
opacity: 1;
}
2% {
transform: scale(1.2);
opacity: 1;
}
5% {
transform: scale(1);
}
}
.clock {
position: relative;
height: 10em;
width: 10em;
margin: 24px auto;
border-radius: 50%;
background-color: #E0B82F;
background-size: 88%;
}

.clock.simple:after {
background: #000;
border-radius: 50%;
content: “”;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5%;
height: 5%;
z-index: 10;
}
.minutes-container, .hours-container, .seconds-container, .tempo-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hours {
display:none;
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes {
display:none;
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds {
display:none;
background: #000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}
.tempo {
background: #000;
height: 65%;
left: 49.5%;
position: absolute;
top: 44%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}
.hours-container {
animation: rotate 43200s infinite linear;
}

/*
.minutes-container {
animation: rotate 3600s infinite steps(60);
}
.seconds-container {
animation: rotate 60s infinite steps(60);
}
*/

.minutes-container {
animation: rotate 3600s infinite linear;
}
.seconds-container {
animation: rotate 60s infinite linear;
}

.tempo-container {
animation: rotate 1.2s infinite linear;
}
.beat1 {
animation: bounceIn 1.2s infinite linear;
animation-delay: .6s;
}
.beat2 {
animation: bounceIn 1.2s infinite linear;
}
.beat1 {
border-radius: 50%;
background-color: #CF461C;
background-size: 88%;
height: 2em;
position: absolute;
left: 40%;
top: -10px;
width: 2em;
}
.beat2 {
border-radius: 50%;
background-color: #5088A3;
background-size: 88%;
height: 2em;
position: absolute;
left: 40%;
bottom: -10px;
width: 2em;
}