Loading video...

Video Failed to Load

Go Home

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

147,485 subscribers

59,460 views • 1 year ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇
0:18

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,631 views • 3 years ago

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,769 views • 1 year ago

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }
0:19

Nice opportunity for transitioning CSS grid columns with :has() && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }

jhey ʕ•ᴥ•ʔ

225,369 views • 2 years ago

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;
0:10

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Gabriel

111,907 views • 4 months ago

magnetic bento hover effect w/ css anchor positioning .bento { li:hover article { anchor-name: --a; } .indicator { position-anchor: --a; inset: anchor(inside); transition: inset var(--dur) var(--ease); } }
0:19

magnetic bento hover effect w/ css anchor positioning .bento { li:hover article { anchor-name: --a; } .indicator { position-anchor: --a; inset: anchor(inside); transition: inset var(--dur) var(--ease); } }

jhey ʕ•ᴥ•ʔ

97,660 views • 1 month ago

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }
0:19

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jhey ʕ•ᴥ•ʔ

118,301 views • 2 years ago

typer text transition effect copy code and prompt here:
0:12

typer text transition effect copy code and prompt here:

Arlan Marat

48,477 views • 4 months ago

Jalte diye ai transition template #CapCut #capcutpioneer #pioneertemplate #dibashcreation #hindisongtemplate
0:10

Jalte diye ai transition template #CapCut #capcutpioneer #pioneertemplate #dibashcreation #hindisongtemplate

Dibash creation [DC]

639,500 views • 7 days ago

he watches for your email ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ form:has(:invalid:not(:placeholder-shown)) { --show: 1; } .bear { translate: 0 calc(-100% * var(--show)); transition: translate 0.4s 0.2s ease-out; }
0:17

he watches for your email ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ form:has(:invalid:not(:placeholder-shown)) { --show: 1; } .bear { translate: 0 calc(-100% * var(--show)); transition: translate 0.4s 0.2s ease-out; }

jhey ʕ•ᴥ•ʔ

27,315 views • 1 year ago

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East
0:17

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David East

jhey ʕ•ᴥ•ʔ

154,642 views • 3 years ago

SLAP MWA TREND | TREND TEMPLATE #CapCut #transition #meme #funny #hot #xíontemplate #fypシ
0:10

SLAP MWA TREND | TREND TEMPLATE #CapCut #transition #meme #funny #hot #xíontemplate #fypシ

ERO | VISUALS

356,800 views • 2 years ago

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }
0:18

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

jhey ʕ•ᴥ•ʔ

121,039 views • 1 year ago

paul pogba transition💥 this is my template #pogba #footballedits #capcut #capcutpioneer #pioneertemplate
0:19

paul pogba transition💥 this is my template #pogba #footballedits #capcut #capcutpioneer #pioneertemplate

Freez❄️

1,600,000 views • 13 days ago

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }
0:11

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

326,445 views • 9 months ago

#capcut #capcutpioneer #capcutnow ဒီ AI Slide Transition Effect လေးက ပထမဆုံးမြင်လိုက်တာနဲ့ သင့်ရဲ့နှလုံးသားကို ဖမ်းစားနိုင်မလား။ 💗 ဖရိမ်လေးကို တစ်ချက်ရွှေ့လိုက်ရုံနဲ့ ဗီဒီယိုထဲက မြင်ကွင်းက ချက်ချင်းပြောင်းလဲသွားမှာပါ။ ✨ Transition တစ်ခါပြောင်းတိုင်း အံ့ဩစရာကောင်းပြီး ဆွဲဆောင်မှုရှိတဲ့အပြင် အရမ်းကို အဆင့်မြင့်ပြီး လှပနေမှာပါ။ 😍 ရိုးရိုးဗီဒီယိုလေးတစ်ခုလို့ ထင်ထားပေမယ့် Transition ပြောင်းပြီးနောက်မှာ ဒီလောက်လှပပြီး မျက်စိကျစရာကောင်းလာမယ်လို့ မထင်ထားဘူးနော်။ 🎬 အရေးကြီးတာက ဒီမှာပါ! ဒါဟာ ရှုပ်ထွေးတဲ့ Video Editing နည်းလမ်းမဟုတ်ဘဲ စိတ်ဝင်စားစရာကောင်းတဲ့ AI Transition Effect လေးတစ်ခုပါ။ 🤖 📸 ဒီလိုဗီဒီယိုမျိုး ဖန်တီးနိုင်တဲ့ Template ကို ဗီဒီယိုရဲ့ ဘယ်ဘက်အောက်ထောင့်မှာ ထည့်ပေးထားပါတယ်။ Template အိုင်ကွန်လေးကို နှိပ်ပြီး ဓာတ်ပုံတစ်ပုံသာ တင်လိုက်ရုံနဲ့ ဒီလိုဗီဒီယိုမျိုးကို အလွယ်တကူ ဖန်တီးနိုင်ပါပြီ။ အခုပဲ စမ်းကြည့်လိုက်နော်။ ဒီအမိုက်စား AI Transition Effect လေးက သင့်ရဲ့ဗီဒီယိုကို ပိုပြီးလှပစေပြီး သင့်နှလုံးသားကိုပါ ဖမ်းစားသွားစေမှာပါ။ 💖 #funnyvideo #xuhuong
0:17

#capcut #capcutpioneer #capcutnow ဒီ AI Slide Transition Effect လေးက ပထမဆုံးမြင်လိုက်တာနဲ့ သင့်ရဲ့နှလုံးသားကို ဖမ်းစားနိုင်မလား။ 💗 ဖရိမ်လေးကို တစ်ချက်ရွှေ့လိုက်ရုံနဲ့ ဗီဒီယိုထဲက မြင်ကွင်းက ချက်ချင်းပြောင်းလဲသွားမှာပါ။ ✨ Transition တစ်ခါပြောင်းတိုင်း အံ့ဩစရာကောင်းပြီး ဆွဲဆောင်မှုရှိတဲ့အပြင် အရမ်းကို အဆင့်မြင့်ပြီး လှပနေမှာပါ။ 😍 ရိုးရိုးဗီဒီယိုလေးတစ်ခုလို့ ထင်ထားပေမယ့် Transition ပြောင်းပြီးနောက်မှာ ဒီလောက်လှပပြီး မျက်စိကျစရာကောင်းလာမယ်လို့ မထင်ထားဘူးနော်။ 🎬 အရေးကြီးတာက ဒီမှာပါ! ဒါဟာ ရှုပ်ထွေးတဲ့ Video Editing နည်းလမ်းမဟုတ်ဘဲ စိတ်ဝင်စားစရာကောင်းတဲ့ AI Transition Effect လေးတစ်ခုပါ။ 🤖 📸 ဒီလိုဗီဒီယိုမျိုး ဖန်တီးနိုင်တဲ့ Template ကို ဗီဒီယိုရဲ့ ဘယ်ဘက်အောက်ထောင့်မှာ ထည့်ပေးထားပါတယ်။ Template အိုင်ကွန်လေးကို နှိပ်ပြီး ဓာတ်ပုံတစ်ပုံသာ တင်လိုက်ရုံနဲ့ ဒီလိုဗီဒီယိုမျိုးကို အလွယ်တကူ ဖန်တီးနိုင်ပါပြီ။ အခုပဲ စမ်းကြည့်လိုက်နော်။ ဒီအမိုက်စား AI Transition Effect လေးက သင့်ရဲ့ဗီဒီယိုကို ပိုပြီးလှပစေပြီး သင့်နှလုံးသားကိုပါ ဖမ်းစားသွားစေမှာပါ။ 💖 #funnyvideo #xuhuong

Lily

602,200 views • 22 days ago

#capcut #capcutpioneer #capcutnow ဒီ AI Slide Transition Effect လေးက ပထမဆုံးမြင်လိုက်တာနဲ့ သင့်ရဲ့နှလုံးသားကို ဖမ်းစားနိုင်မလား။ 💗 ဖရိမ်လေးကို တစ်ချက်ရွှေ့လိုက်ရုံနဲ့ ဗီဒီယိုထဲက မြင်ကွင်းက ချက်ချင်းပြောင်းလဲသွားမှာပါ။ ✨ Transition တစ်ခါပြောင်းတိုင်း အံ့ဩစရာကောင်းပြီး ဆွဲဆောင်မှုရှိတဲ့အပြင် အရမ်းကို အဆင့်မြင့်ပြီး လှပနေမှာပါ။ 😍 ရိုးရိုးဗီဒီယိုလေးတစ်ခုလို့ ထင်ထားပေမယ့် Transition ပြောင်းပြီးနောက်မှာ ဒီလောက်လှပပြီး မျက်စိကျစရာကောင်းလာမယ်လို့ မထင်ထားဘူးနော်။ 🎬 အရေးကြီးတာက ဒီမှာပါ! ဒါဟာ ရှုပ်ထွေးတဲ့ Video Editing နည်းလမ်းမဟုတ်ဘဲ စိတ်ဝင်စားစရာကောင်းတဲ့ AI Transition Effect လေးတစ်ခုပါ။ 🤖 📸 ဒီလိုဗီဒီယိုမျိုး ဖန်တီးနိုင်တဲ့ Template ကို ဗီဒီယိုရဲ့ ဘယ်ဘက်အောက်ထောင့်မှာ ထည့်ပေးထားပါတယ်။ Template အိုင်ကွန်လေးကို နှိပ်ပြီး ဓာတ်ပုံတစ်ပုံသာ တင်လိုက်ရုံနဲ့ ဒီလိုဗီဒီယိုမျိုးကို အလွယ်တကူ ဖန်တီးနိုင်ပါပြီ။ အခုပဲ စမ်းကြည့်လိုက်နော်။ ဒီအမိုက်စား AI Transition Effect လေးက သင့်ရဲ့ဗီဒီယိုကို ပိုပြီးလှပစေပြီး သင့်နှလုံးသားကိုပါ ဖမ်းစားသွားစေမှာပါ။ 💖 #funnyvideo #xuhuong
0:19

#capcut #capcutpioneer #capcutnow ဒီ AI Slide Transition Effect လေးက ပထမဆုံးမြင်လိုက်တာနဲ့ သင့်ရဲ့နှလုံးသားကို ဖမ်းစားနိုင်မလား။ 💗 ဖရိမ်လေးကို တစ်ချက်ရွှေ့လိုက်ရုံနဲ့ ဗီဒီယိုထဲက မြင်ကွင်းက ချက်ချင်းပြောင်းလဲသွားမှာပါ။ ✨ Transition တစ်ခါပြောင်းတိုင်း အံ့ဩစရာကောင်းပြီး ဆွဲဆောင်မှုရှိတဲ့အပြင် အရမ်းကို အဆင့်မြင့်ပြီး လှပနေမှာပါ။ 😍 ရိုးရိုးဗီဒီယိုလေးတစ်ခုလို့ ထင်ထားပေမယ့် Transition ပြောင်းပြီးနောက်မှာ ဒီလောက်လှပပြီး မျက်စိကျစရာကောင်းလာမယ်လို့ မထင်ထားဘူးနော်။ 🎬 အရေးကြီးတာက ဒီမှာပါ! ဒါဟာ ရှုပ်ထွေးတဲ့ Video Editing နည်းလမ်းမဟုတ်ဘဲ စိတ်ဝင်စားစရာကောင်းတဲ့ AI Transition Effect လေးတစ်ခုပါ။ 🤖 📸 ဒီလိုဗီဒီယိုမျိုး ဖန်တီးနိုင်တဲ့ Template ကို ဗီဒီယိုရဲ့ ဘယ်ဘက်အောက်ထောင့်မှာ ထည့်ပေးထားပါတယ်။ Template အိုင်ကွန်လေးကို နှိပ်ပြီး ဓာတ်ပုံတစ်ပုံသာ တင်လိုက်ရုံနဲ့ ဒီလိုဗီဒီယိုမျိုးကို အလွယ်တကူ ဖန်တီးနိုင်ပါပြီ။ အခုပဲ စမ်းကြည့်လိုက်နော်။ ဒီအမိုက်စား AI Transition Effect လေးက သင့်ရဲ့ဗီဒီယိုကို ပိုပြီးလှပစေပြီး သင့်နှလုံးသားကိုပါ ဖမ်းစားသွားစေမှာပါ။ 💖 #funnyvideo #xuhuong

Lily

15,300 views • 4 days ago

How to use Text to Columns in Excel.
0:15

How to use Text to Columns in Excel.

Tips Excel | AI Productivity

297,005 views • 8 months ago