如何实现Tailwind/CSS环形偏移量的平滑收缩过渡动画？

To add a smooth transition for the ring-offset change on hover, you just need to include Tailwind's transition utilities on the avatar image. Since ring-offset-width is an animatable CSS property, we can transition it directly.

Modified Code #

<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-all duration-300 ease-in-out" 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>

Key Changes #

• Added transition-all duration-300 ease-in-out to the image class. This animates all animatable properties (including ring-offset-width) over a 300ms period with a smooth ease-in-out curve.
• For better performance (only transition the ring offset instead of all properties), replace transition-all with transition-[ring-offset-width] (Tailwind supports custom property transitions via square brackets).

Optional Customizations #

• Adjust the duration: Use duration-200 for faster animation or duration-500 for slower movement.
• Change the easing curve: Swap ease-in-out with ease-in, ease-out, or ease-linear to match your desired animation feel.

内容的提问来源于stack exchange，提问作者Shulz