Adam Argyleは、2025年のCSSアドバイスで明確です。
すべてのフロントエンド開発者は有効化する方法を知っている必要があると思います ページの移行、遷移a
、 ポップオーバー、 そして、アニメーションライトアンドダーク グラデーションテキスト、 CSSを安全に入力します システム、および 弾力性のある緩和を追加します アニメーションに。
誰も私に尋ねませんでしたが、アダムの6人のお気に入りを選ばなければならなかったら、それはアニメーションに関するすべてのものです 、ポップオーバー、そして
allow-discrete、 overlay、 ::backdrop、 :popover-open、 @starting-style、そしてもっと。
/* enable transitions, allow-discrete, define timing */
[popover], dialog, ::backdrop {
transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s;
opacity: 0;
}
/* ON STAGE */
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 1;
}
/* OFF STAGE */
/* starting-style for pre-positioning (enter stage from here) */
@starting-style {
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 0;
}
}ジェレミー・キースも CSSスニペットで少し投稿しました その中には、彼がアダムとオーバーラップすることを少し含めて、デフォルトでオプトインしてトランジションを表示します。
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}アイデアは、あなたが正しい方法でクロスフェードを取得し、準備ができたらよりクロスページのアニメーションを振りかけるように設定されることです。
Una Kravetsには、非常に新しいものに関する投稿があります @function たくさんの例があるCSSのもの。私はこの小さなスニペットを楽しんだ：
/* Take up 1fr of space for the sidebar on screens smaller than 640px, and take up the --sidebar-width for larger screens. 20ch is the fallback. */
@function --layout-sidebar(--sidebar-width: 20ch) {
result: 1fr;
@media (width > 640px) {
result: var(--sidebar-width) auto;
}
}
.layout {
display: grid;
grid-template-columns: --layout-sidebar();
}私は、私たちが望むときにCSSの論理を抽象化できるという考えに興味をそそられています。おそらく、それをより再利用可能にし、CSSのより宣言的な部分を読みやすくするでしょう。
これが別のものです。私はまったくわからなかった カレットの設計制御 CSS（あなたがタイプしている編集可能な領域のもの、それは通常点滅する垂直線です）に来ていました。私たちが持っていることを知っていたと思います caret-color、あなたが私に尋ねると、これはprettttttttyニッチです。しかし、今では、世話の形状と文字通りのアニメーションを制御しているようです。
textarea {
color: white;
background: black;
caret-shape: block;
caret-animation: manual;
animation: caret-block 2s step-end infinite;
}
@keyframes caret-block {
0% { caret-color: #00d2ff; }
50% { caret-color: #ffa6b9; }
}にジャンプします イガリアのブログ投稿 そのビデオを見るには。
今週はそれがすべてです。実際にあなたが見なければならないのを待ってください ジュリア中新世のチキンビデオ。今私は終わった。
Views: 0
