My latest creation involves an animated display of leaves "waving" gracefully. These leaves come with a default rotate value from tailwind:
@keyframes growSize {
0% {
transform: rotate(0deg);
max-height: 0;
}
25% {
max-height: 9999px;
}
50% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: none;
}
}
.leaf-animation {
animation-name: growSize;
animation-delay: 2.5s;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}<script src="https://cdn.tailwindcss.com/3.3.3"></script>
<div class="relative z-0 ml-32 mt-16 w-max">
<img class="rounded-l-md rounded-r-3xl" src="https://placehold.co/308x392" width="308" height="392" />
<svg viewBox="0 0 87 97" class="leaf-animation absolute -z-10 -rotate-45 w-20 -top-14 -left-14"><use href="#leaf" /></svg>
<svg viewBox="0 0 87 97" class="leaf-animation absolute -z-10 -rotate-45 -scale-x-100 w-40 bottom-4 -left-32"><use href="#leaf" /></svg>
<svg viewBox="0 0 87 97" class="leaf-animation absolute -z-10 rotate-45 w-36 bottom-32 -right-24"><use href="#leaf" /></svg>
</div>
<svg class="w-0 h-0" viewBox="0 0 87 97" fill="none" xmlns="http://www.w3.org/2000/svg" id="leaf">
<path d="M85.2 47C85.2 47 82.7 51.6 80.6 52.4C78.6 53.2 57.7 62.4 54.3 61.9C51 61.3 57.7 56.2 75.5 48.7C93.3 41.3 75.5 20.6 75.5 20.6L75.2 21.5C72.9 29.4 67.6 36.1 60.3 39.8C57.4 41.3 54.7 43.6 52.2 43C44.2 40.9 84.7 21.8 64.6 14.1C44.5 6.4 39.3 0.4 39.3 0.4C35.2 7.2 18.6 11.2 18.6 18.7C18.7 26.2 31.5 31.4 28.1 34.2C24.8 37.1 14.7 22.1 14.7 22.1C7.20003 28.6 6.70003 33.5 6.70003 33.5C10.1 47.9 31.2 57 21.7 56.2C7....
I want the waving animation to be synchronized with their original rotation and then revert back to the initial rotation afterwards