Tell us what’s happening:
Describe your issue in detail here.
I want to know why we need to include ‘rotate(-45deg)’ in the keyframes named beat. I tried taking them out and the resulting animation re-rotate every time the animation loop.
Didn’t we already initially make it rotate -45 degrees in the heart class by putting ‘rotate(-45deg)’ in the .heart class?
So my question is, why doesn’t the heart just stay in the upright position every time the animation loop if we take out the ‘rotate(-45deg)’ code in the keyframes named beat.
**Your code so far**
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0
Challenge: Make a CSS Heartbeat using an Infinite Animation Count
Link to the challenge: