Search code examples
tailwind-css

Tailwind and CSS animate ring offset shrinking

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7">
   <div class="relative mb-5 cursor-pointer">
      <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px]" src="/images/Avatar1.png" alt="Bordered avatar">
      <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]">
         <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
         </svg>
      </div>
   </div>
   <div>
      <h1 class="font-bold">First Name</h1>
   </div>
   <div>
      <h1>Name</h1>
   </div>
   <div>
      <h1 class="text-[#636da8]">Project Mngr</h1>
   </div>
</div>

enter image description here

How do I animate the transition of off-set ring any css/tailwind solution? Example are these 2 thumbnails the one on the left is being hovered upon and one on the right is the initial state. I want it to have a shrinking animation when the thumbnail is being hovered and not the current one I have since its very sudden

Solution

  • You could consider applying a transition-property CSS value that includes box-shadow, like transition or transition-all Tailwind classes, along with a non-0 transition-duration, that the aforementioned class names set as well:

    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7">
   <div class="relative mb-5 cursor-pointer">
      <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition" src="https://picsum.photos/90/90" alt="Bordered avatar">
      <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]">
         <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
         </svg>
      </div>
   </div>
   <div>
      <h1 class="font-bold">First Name</h1>
   </div>
   <div>
      <h1>Name</h1>
   </div>
   <div>
      <h1 class="text-[#636da8]">Project Mngr</h1>
   </div>
</div>

    Otherwise, you could consider applying transition-property: box-shadow and transition-duration: 150ms; (amongst other properties) via the transition-[box-shadow] Tailwind class to only transition box-shadow:

    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7">
   <div class="relative mb-5 cursor-pointer">
      <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition-[box-shadow]" src="https://picsum.photos/90/90" alt="Bordered avatar">
      <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]">
         <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
         </svg>
      </div>
   </div>
   <div>
      <h1 class="font-bold">First Name</h1>
   </div>
   <div>
      <h1>Name</h1>
   </div>
   <div>
      <h1 class="text-[#636da8]">Project Mngr</h1>
   </div>
</div>