How to make such an animation on html + css? enter image description here

  • I don’t want to give anything ready, but here are the search keywords: @keyframes , animation , animation-delay , opacity - andreymal
  • one
    In general, you can stupidly stick the gif as it is and it will be pure html even without css: D - andreymal
  • You can of course stick a gif, but you need without gifs. - Frontender

1 answer 1

You need to use the animation property, in which you can set animations set using @keyframes and adjust the speed, delay and duration of the animation.

Borrowing a heart from css-tricks.com , you can get the following

 .heart { position: relative; display: inline-block; width: 50px; height: 45px; opacity: 0.1; animation: 1.3s opacity_change linear infinite; } .h1 { animation-delay: 0.2s; } .h2 { animation-delay: 0.3s; } .h3 { animation-delay: 0.4s; } .h4 { animation-delay: 0.5s; } .h5 { animation-delay: 0.6s; } .h6 { animation-delay: 0.7s; } .h7 { animation-delay: 0.8s; } .h8 { animation-delay: 0.9s; } .heart:before, .heart:after { position: absolute; content: ""; left: 25px; top: 0; width: 25px; height: 40px; background: #ff00de; border-radius: 25px 25px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes opacity_change { 0% { opacity: 1; } 100% { opacity: 0.1; } } 
 <div class="heart h1"></div> <div class="heart h2"></div> <div class="heart h3"></div> <div class="heart h4"></div> <div class="heart h5"></div> <div class="heart h6"></div> <div class="heart h7"></div> <div class="heart h8"></div>