Heart beating animation

i’m working in some project my problem was when i have tried to create a heart beating he doesn’t work correctly i don’t know what i miss in my code

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.container{
background:url(web.jpg) no-repeat;
background-size:cover;
height:100vh;
}
.navbar{
background:rgba(0,0,0,0.5);
height:70px;
width:100%;

}
ul{
list-style-type:none;
float:right;
line-height:70px;
margin:0 25px;
}
ul li{
display:inline-block;

color:white;
padding:0 15px;

}
li:hover{
background:rgb(144,15,451,0.5);

}
img{
height:80px;
width:80px;
}
img ,h1{
display:inline-block;
}
.myw{
color:rgb(255,255,255,0.8);
position:absolute;
top:27px;

}

.text{
color:rgba(255,255,255,0.5);
}
h3{
color:white;
}
.cont{
text-align:center;
margin-top:50px;
}
.heart{
background-color:pink;
height:80px;
width:80px;
transform:rotate(-45deg);
margin-left:45%;
margin-top:5%;
animation-name:hair;
animation-duration:1s;
animation-iteration-count:infinite;

}

.pist1{
background-color:pink;
height:80px;
width:80px;
border-radius:50%;
position:relative;
bottom:50px;
}
.pist2{
background-color:pink;
height:80px;
width:80px;
border-radius:50%;
position:absolute;
left:50px;
bottom:0px;

}

@keyframes hair{
50%{

height:50px;
width:50px;
}

}
footer{
background:rgba(0,0,0,0.5);
height:110px;
width:100%;
 position: absolute;
  bottom: 0;
}
@media (max-width : 800px){
.navbar{
background-color:red;

}
}
</style>

</head>
<body>
<div class="container">
<nav class="navbar">
<ul>
<li>Home</li>
<li>Accueille</li>
<li>About</li>

</ul>
<div class="active">
<img src="owl.png"><h1 class="myw">My Website</h1>
</div>

</nav>
<div class="cont">
<h1 class="text">Our service is more important !</h1>
<h3>We are the best</h3>
<div class="heart">
<div class="pist1"></div>
<div class="pist2"></div>
</div>
</div>
<footer>
<ul>
<li>Contact</li>
<li>Exemple 1</li>

</ul>

</footer>
</div>

</body>


</html>

Welcome, miral.

For your keyframes hair, you are telling .heart to have certain CSS properties at 50%, but not what to do before or after that…

Try adding more.

it didn’t work i have changed 0%{} and the 100%{}

.heart{
background-color:pink;
height:80px;
width:80px;
transform:rotate(-45deg);
margin-left:45%;
margin-top:5%;
animation-name:hair;
animation-duration:1s;
animation-iteration-count:infinite;

}

.pist1{
background-color:pink;
height:80px;
width:80px;
border-radius:50%;
position:relative;
bottom:50px;
}
.pist2{
background-color:pink;
height:80px;
width:80px;
border-radius:50%;
position:absolute;
left:50px;
bottom:0px;

}

@keyframes hair{
0%{
height:80px;
width:80px;
}
50%{

height:50px;
width:50px;
}
100%{
height:80px;
width:80px;
}
}

Try something more like this, it would be much easier and more scalable:

@keyframes hair {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

Hope this helps

the heart reversed
Opera Snapshot_2020-02-25_180721_localhost