I've created two animations with CSS a clock and a bouncing ball. Separately they both work as intended, but once I put them in the same file the bouncing ball disappeared.
If I delete @keyframes rotation the clock stops working but the bouncing ball appears. Is there any way how to make both animations work?
.clock {
position: relative;
width: 400px;
height: 400px;
border: 10px solid;
border-radius: 50%;
}
#second {
position: absolute;
background: black;
width: 2px;
height: 180px;
margin: 20px 199px;
animation: rotation 60s infinite linear;
transform-origin: bottom left;
}
#minute {
position: absolute;
background: black;
width: 6px;
height: 140px;
margin: 60px 197px;
animation: rotation 3600s infinite linear;
transform-origin: bottom right;
}
#hour {
position: absolute;
background: black;
width: 10px;
height: 120px;
margin: 80px 195px;
animation: rotation 43200s infinite linear;
transform-origin: bottom left;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
.box {
position: relative;
}
.ball {
position: absolute;
height: 100px;
width: 100px;
border: 3px solid pink;
border-radius: 50%;
animation: bounce 2s infinite;
background: pink;
}
.step1 {
position: absolute;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
.step2 {
position: absolute;
top: 150px;
left: 220px;
margin-top: 20px;
height: 10px;
width: 220px;
background: cyan;
}
.step3 {
margin-top: 40px;
position: absolute;
left: 440px;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
@keyframes bounce {
from {margin: 100pxz 0px;}
to{margin: 50px 500px;}
0% {
transform: translateY(-30%);
}
12% {
transform: translateY(33%);
}
24% {
transform: translateY(-66%);
}
36% {
transform: translateY(33%);
}
48% {
transform: translateY(-20%);
}
100% {
transform: translateY(33%);
}<div class="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<div class="box">
<div class="step1"></div>
<div class="step2"></div>
<div class="step3"></div>
<div class="ball"></div>
</div>
