6

Ok, so I have this HTML code for an I Love You animation. And I'm having some difficult time to adjust it as an inline code.

Is this possible in any way?

.heart {
  fill: red;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
I 

<svg class="heart" viewBox="0 0 32 29.6">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg> 

You

5
  • 1
    You can't put an animation as an inline style.
    – Paulie_D
    Jul 4, 2019 at 15:20
  • @Paulie_D Didn't know that. That's why I've been punching my head against the wall for several minutes. Thanks.
    – Alain
    Jul 4, 2019 at 15:28
  • @weegee semicolons aren't required for the last property-value pair in a CSS selector declaration, so one not being there is not an error.
    – TylerH
    Jul 4, 2019 at 15:32
  • @TylerH No, a semi-colon is not required on the last property. but a comma will cause the line to not be recognised by the browser and so will fail. Hence this IS a typo issue - over and above the "inline" issue,
    – Paulie_D
    Jul 4, 2019 at 15:57
  • @Paulie_D First, the comma was a typo in transcription over to Stack Overflow which OP corrected nearly 30 minutes ago, so, no, this is still not a typo issue. Second, I was addressing weegee's (now deleted) comment which said it wasn't working because it was missing a semicolon on the last line, which was an incorrect claim.
    – TylerH
    Jul 4, 2019 at 16:00

4 Answers 4

6

You can try like below with pure SVG and no external CSS (only inline)

I 

<svg class="heart" viewBox="0 0 32 29.6" width="50" style="overflow:visible;position: relative;top: 5px;">
<g transform-origin="center">
 <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="red"/>
      <animateTransform attributeName="transform"
                type="scale"
                keyTimes="0;0.5;1" values="1;1.3;1"
                dur="1s" repeatCount="indefinite"/>
                
    </g>
</svg> 

You

3

You might include the style into svg element itself:

I

<svg class="heart" viewBox="0 0 32 29.6">
  <style>
    .heart {
      fill: red;
      position: relative;
      top: 5px;
      width: 50px;
      animation: pulse 1s ease infinite
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
  </style>
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>

You

2

You can place the keyframe and css inside the styles tag inside svg. Like here

<svg">
   <style type="text/css">
     .heart {
       fill: red;
       position: relative;
       top: 5px;
       width: 50px;
       animation: pulse 1s ease infinite, 
     }
     @keyframes pulse {
       0% { transform: scale(1); }
       50% { transform: scale(1.3); }
       100% { transform: scale(1); }
     }
  </style>
</svg>

https://codepen.io/shshaw/pen/WvYJQP.

But the inline can not be done.

1

You can use scoped style. It will only affect his direct parent and content.

I 

<svg class="heart" viewBox="0 0 32 29.6">
<style scoped>
.heart {
  fill: red;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite; 
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
</style>
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg> 

You

3
  • did you test it? Jul 4, 2019 at 15:36
  • Yes, I use it very often in advertising content.
    – darthnach
    Jul 5, 2019 at 20:11
  • this is not working: jsfiddle.net/bkv3ufds there is no more scoped CSS since a while Jul 5, 2019 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.