A little help making this heart move please

Hey! During an exercise i wanted to mess with the code more and add more things i learnt from the next exercises but now i got a bit stuck. i wanted to make the heart move in a triangle while switching colours but i cant seem to make the whole heart do that. there’s always a part of the heart that stays one colour…
Can i have a bit of help please? im quite new in this :sweat_smile:

<!DOCTYPE html>
<html>
	<style>
  .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: ph;
    animation-duration: 10s;
    
  }
   @keyframes ph {
      0% {
          background-color:pink;
          top: 0px;
          left: 0px;
      }
      
      10% {
          background-color:white;
          top: 5px;
          left: 5px;
      }
      
      20% {
          background-color:pink;
          top: 10px;
          left: 10px;
      }
       
      30% {
          background-color:black;
          top: 10px;
          left:10px;
      }
      40% {
          background-color:pink;
          top: 5px;
          left:5px;
      }
      
       50% {
          background-color:white;
          top: 0px;
          left:0px;
      }
      
      60% {
          background-color:pink;
          top: -5px;
          left: -5px;
      }
      
      70% {
          background-color:black;
          top: -10px;
          left:-10px;
      }
      
      80% {
          background-color:pink;
          top: -10px;
          left:-10px;
      }
      
      90% {
          background-color:white;
          top: -5px;
          left:-5px;
      }
      100% {
          background-color:pink;
          top: 0px;
          left:0px;
      }
  }
  
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
    animation-name: bh;
    animation-duration: 10s;
    
  }
  @keyframes bh {
      0% {
          background-color:pink;
         
      }
      
      10% {
          background-color:white;
         
      }
      
      20% {
          background-color:pink;
          
      }
       
      30% {
          background-color:black;
        
          
      }
      40% {
          background-color:pink;
        
          
      }
      
       50% {
          background-color:white;
         
      }
      
      60% {
          background-color:pink;
          
      }
      
      70% {
          background-color:black;
      }
      
      80% {
          background-color:pink;
          
      }
      
      90% {
          background-color:white;
          
      }
      100% {
          background-color:pink;
          
  }
 
     
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
    animation-name: wh;
    animation-duration: 10s; 
  }
  @keyframes wh {
      0% {
          background-color:pink;
         
      }
      
      10% {
          background-color:white;
         
      }
      
      20% {
          background-color:pink;
          
      }
       
      30% {
          background-color:black;
        
          
      }
      40% {
          background-color:pink;
        
          
      }
      
       50% {
          background-color:white;
         
      }
      
      60% {
          background-color:pink;
          
      }
      
      70% {
          background-color:black;
      }
      
      80% {
          background-color:pink;
          
      }
      
      90% {
          background-color:white;
          
      }
      100% {
          background-color:pink;
          
  }
  }
  
</style>
<div class="heart"></div>
</html>

Hi @akash403!
It’s great that you are tinkering! I normally find that that is when I learn the most. It’s a lot easier for us to help if you include a link to the section of FCC that you are currently on. Although most of us have worked through the various sections we don’t magically remember where they are. Just gives us some context!
Cheers and merry tinkering!

It would really help if you created a codepen for this and then gave us the link to the pen. Also, I think you have some syntax errors in your CSS which is probably causing this from working properly. If you stick this into codepen and analyze the CSS you’ll find the errors.

Update: Once I fixed the syntax error (you are missing a right curly brace, I’ll let you figure out where) then it started working properly, although I’m not sure if it does exactly what you are trying to do.

2 Likes

oh! Thank you a lot! I found the curly brace. Now the heart moves well. Could you tell me what a codepen is? That way i may do that next time im stuck. I’m a beginner so im still finding out stuff. Thanks a lot again!!

Codepen features

Codepen signup

How to use Codepen (written by our own @jwilkins.oboe)

1 Like