daisyui/components/textrotate.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.text-rotate{height:1lh;@layer daisyui.l1.l2.l3{vertical-align:bottom;white-space:nowrap;--duration:var(--tw-duration);transition-property:none;display:inline-block;overflow:hidden;&>*{height:calc(var(--items,1) * 100%);justify-items:start;display:grid;&:has(:nth-child(2)){--items:2;animation:rotator var(--duration,10s) linear(0 0% 49%, .5 50% 99%, 1 100% 100%) infinite}&:has(:nth-child(3)){--items:3;animation:rotator var(--duration,10s) linear(0 0% 32%, .333333 33% 65%, .666666 66% 99%, 1 100% 100%) infinite}&:has(:nth-child(4)){--items:4;animation:rotator var(--duration,10s) linear(0 0% 24%, .25 25% 49%, .5 50% 74%, .75 75% 99%, 1 100% 100%) infinite}&:has(:nth-child(5)){--items:5;animation:rotator var(--duration,10s) linear(0 0% 19%, .2 20% 39%, .4 40% 59%, .6 60% 79%, .8 80% 99%, 1 100% 100%) infinite}&:has(:nth-child(6)){--items:6;animation:rotator var(--duration,10s) linear(0 0% 15%, .16666 16% 32%, .333333 33% 49%, .5 50% 65%, .666666 66% 82%, .833333 83% 99%, 1 100% 100%) infinite}&>*{clip-path:inset(.5px 0);align-content:baseline;&:first-child{translate:var(--first-item-position)}}}&:hover{&>*{animation-play-state:paused}}}}@keyframes rotator{89.9999%,to{--first-item-position:0 0%}90%,99.9999%{--first-item-position:0 calc(var(--items) * 100%)}to{translate:0 -100%}}}