How to add an animation to an admonition icon?

[jromal]

Hi all. It is not clear to me if is possible to have animation on the admonition icon.

I have created my own admonition. Nothing special, just an SVG file and some colors.

:root {
    --md-admonition-icon--about: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path d="M504.5,783.1c4.8,0,9.7-0.3,14.6-0.9c47-5.6,87-38.5,101.7-83.8c1.1-3.4-0.5-7-3.7-8.5c-3.2-1.5-7.1-0.2-8.9,2.8c-0.2,0.3-18.9,30.5-91.6,40.3c-10.9,1.5-21.5,2.2-31.5,2.2c-51,0-73.7-19.2-73.9-19.4c-2.6-2.3-6.5-2.3-9.1-0.1c-2.7,2.2-3.3,6.1-1.5,9C422.7,760.8,462.5,783.1,504.5,783.1z"/><path d="M895.7,332.2c-0.6,0-1.2,0.1-1.8,0.1C851.3,147.7,688.3,10,493,10C292.3,10,125.7,155.3,88.7,347.5c-35.9,6.5-63.3,38-63.3,76.2v152.8c0,42.8,34.3,77.6,76.7,77.6c23.9,0,45-11.3,59.1-28.6c33.9,89.7,103,162.1,190.4,200.3c0.2-0.5,1.9-3.7,3.9-6.2c1.4-1.8,2.9-3.2,4.2-3.2c1.4,0,2.6,0.5,3.7,1.3C343.3,802.5,270.2,725,254.4,617c-7-47.6,28.7-94.3,70.2-102c66.6-12.4,132.9-26.5,199.5-38.7c42.3-7.7,71.3-30.9,89-69.6c4.1-9,10.1-27.3,12.9-53.7c0.7-3.9,3.9-6.9,8.1-6.9c2.7,0,5.1,1.4,6.6,3.4l1.8-1.1c26.3,38.1,78.3,122.5,85.8,211.5c8.6,101.7,3.8,171.4-74.1,242.7c-0.1,0.1-0.2,0.2-0.3,0.3c-1.1,1.2-1.7,2.7-1.7,4.4c0,2.2,1.2,4.1,2.9,5.2c0.6,0.3,1.3,0.6,1.9,0.9c0.5,0.1,1,0.3,1.5,0.3c0.5,0,1-0.2,1.5-0.3c1.1-0.6,2.2-1.3,3.2-1.8c78.8-43.4,139.2-115.8,167.1-203c11.3,16.8,29,28.9,49.6,33.1c-33,150-166.7,243.8-332.4,258c-9.9-24.6-34.4-42.1-63.1-42.1c-37.5,0-67.9,29.7-67.9,66.3s30.4,66.3,67.9,66.3c30.2,0,55.5-19.4,64.3-46.1c191.8-15.6,345.5-129.6,377.6-306.7c28.4-11.8,48.3-39.7,48.3-72.1V410.4C974.5,367.2,939.2,332.2,895.7,332.2z M825,376.6c-50-135.5-179.6-232.3-332.1-232.3c-151.8,0-281,96-331.5,230.6c-2.5-3.1-5.5-5.7-8.4-8.4C181.6,202.5,322.8,77.7,493,77.7c169.4,0,310.2,123.5,339.7,286.4C829.8,368.1,827.1,372.2,825,376.6z"/><path d="M351.7,825.7C351.7,825.7,351.7,825.7,351.7,825.7C351.7,825.8,351.7,825.8,351.7,825.7z"/></svg>')
}
.md-typeset .admonition.about,
.md-typeset details.about {
  border-color: hsla(40, 100%, 49%, 1); 
}
.md-typeset .about > .admonition-title,
.md-typeset .about > summary {
  background-color: hsla(40, 100%, 49%, 1);
  border-color: hsla(40, 100%, 49%, 1);
}
.md-typeset .about > .admonition-title::before,
.md-typeset .about > description::before {
    background-color: hsla(228, 38%, 25%, 1);
    -webkit-mask-image: var(--md-admonition-icon--about);
          mask-image: var(--md-admonition-icon--about);
}

I have setup the keyframe animation on an CSS file. Just copied from the example of the documentation.

@keyframes heart {
    0%, 40%, 80%, 100% {
      transform: scale(1);
    }
    20%, 60% {
      transform: scale(1.15);
    }
  }
  .heart {
    animation: heart 1000ms infinite;
  }

And works perfectly with "standalone" icons.

:octicons-heart-fill-24:{ .heart }

Is it possible to use the ".heart" keyframe with the icon definition of the admonition? Or somewhere else?

Thanks.

[squidfunk]

Yes, probably something like (untested):

.md-typeset .about > .admonition-title::before,
.md-typeset .about > description::before {
    animation: heart 1000ms infinite;
}

I encourage you to learn CSS, it's actually quite simple and you can customize Material for MkDocs easily.

[jromal]

Many thanks Martin.

It works perfectly.

You are right I need to learn CSS. It is on the backlog list of things to learn. For the moment I just copy and paste pieces here and there. CSS is far away from my expertise area and therefore struggling. This is why I appreciate so much your feedback.