Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

argyleink's profile picture

Adam Argyle

57,668 subscribers

22,444 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji#CSS
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 ʕ•ᴥ•ʔ

120,918 görüntüleme • 1 yıl önce

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,569 görüntüleme • 3 yıl önce

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }
0:17

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

jhey ʕ•ᴥ•ʔ

280,995 görüntüleme • 1 yıl önce

CSSの新しいsibling-index()を使うと、順番に出現するモーションを簡単に実装できます。
0:19

CSSの新しいsibling-index()を使うと、順番に出現するモーションを簡単に実装できます。

池田 泰延

78,920 görüntüleme • 5 ay önce

“SAN’S ABOUT TO GET A SIBLING!” “SAN’S ABOUT TO GET A SIBLING!” “SAN’S ABOUT TO GET A SIBLING!” 😭😭😭😭😭😭😭😭😭😭😭😭😭 #BestietastybyAJINOMOTOss3 #เตนิว #POLCASAN
0:12

Sensitive content

“SAN’S ABOUT TO GET A SIBLING!” “SAN’S ABOUT TO GET A SIBLING!” “SAN’S ABOUT TO GET A SIBLING!” 😭😭😭😭😭😭😭😭😭😭😭😭😭 #BestietastybyAJINOMOTOss3 #เตนิว #POLCASAN

𝐭𝐚𝐰𝐚𝐧𝒄𝒉𝒂𝒑𝒕𝒆𝒓.

158,220 görüntüleme • 4 ay önce

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪
0:15

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪

jhey ʕ•ᴥ•ʔ

298,144 görüntüleme • 3 yıl önce

Negotiating with my sibling
0:15

Negotiating with my sibling

Emily Prime

81,260 görüntüleme • 2 ay önce

Erika and sibling 🥰💕
0:14

Erika and sibling 🥰💕

azriel eka

22,020 görüntüleme • 13 gün önce

What real sibling affection is like
0:15

Sensitive content

What real sibling affection is like

culture jpeg

348,643 görüntüleme • 6 ay önce

it’s always a sibling
0:13

it’s always a sibling

𓆩♡𓆪 GODS FAVORITE 𓆩♡𓆪

92,939 görüntüleme • 6 ay önce

Sibling goals.
0:11

Sibling goals.

Lucid Motors

27,180 görüntüleme • 11 ay önce

sibling beef
0:19

sibling beef

Posts Of Cats

4,436,145 görüntüleme • 2 yıl önce

Sibling duo
0:14

Sibling duo

Ava Nucci

13,008 görüntüleme • 1 yıl önce

What it feels like to be the youngest sibling🤣💯
0:10

What it feels like to be the youngest sibling🤣💯

Pokemonshell

82,078 görüntüleme • 4 ay önce

Sibling Portraits! #Silksong
0:18

Sibling Portraits! #Silksong

Fera Animations

1,319,233 görüntüleme • 8 ay önce

Sibling behaviour. 😂
0:13

Sibling behaviour. 😂

The Figen

2,677,907 görüntüleme • 1 yıl önce

sibling promoters 🤝
0:11

sibling promoters 🤝

pov you’re an onikabuto 🌟 hoyofest sg

186,617 görüntüleme • 1 yıl önce

All three Lannister sibling POVs sound like this
0:17

All three Lannister sibling POVs sound like this

MsLee🌷 (miyazaki’s LEGIT chosen prophet)

29,260 görüntüleme • 9 ay önce