- 出荷済み
- 2026年8月20日 20:02 UTC
- プロフィール
- Kamo
- コンテンツ
- c945d88
全26要素 「非堆肥化アニメーションを無効化する」にリストされているLighthouse 4つの場所で同じ間違い:ペイントプロパティをアニメーション化します。 測定されると getAnimations() 経由で Chrome で、監査の検査を正確に報告します。 デスクトップ29→2(左2は背景色変換、 モバイル 1 → 1 アニメーションではなく、監査の一覧にない) レポートを指摘する価値はデスクトップでした: =<767px のサイトは既に停止しました。 従って移動式測定される1前後。 hexagon-glow-rotate、x12。 アニメーション化された `background-position` と `transform: 一緒に回転します。 背景の旅行をドロップするだけで変換 アニメーション; グラデーションスライディング 下で回転、8px-blurred 輝きはない 誰が選ぶことができるか。 グラデーション・ボーダー・トラベル x12 以下を参照してください。 — この 1 つの問題が解決しました。 ケム、x1。 レイアウトのプロパティーである `left` をアニメーション化し、バナーはすべての フレーム。 今 `transform`. パーセンテージは変更できません: `左` 含まれているブロックに対して、要素自身の要素に対して `translateX` を解決します ここの幅は60%なので、-100%が-166.667%と200%になった 333.333%。 バッジパルス、x1。 `background` のショートカットをアニメーション化しました。 塗りつぶしは、 ::その後、同じ2つのアルファ間の不透明感を放ちます。 それはz-index -1で坐ります、 0 のペンキの上のインライン内容で位置付けされた擬似要素ので、 後ろに座っている言葉を洗い流しました。 ヒーローヘッドラインパス、x1。 再導入ではなく削除 テキスト入力 スイープはコンポジットできません - それはグリフ形状内の塗料を移動しています、そしていいえ 変形または不透明感が表現する。 以前は、回避策が試みられていました。 測定された悪化: マスクされた上敷の文をduplicating カウントUP 34 から 41 まで、毎回実行されるヘッドラインの 2 番目のフル ラスターを残します。 1ショットの入り口はそのままに、そのまま残っている縦に埋めます。 グラディエント・ボーダー、そしてなぜ :: WRONG ANSWER の WAS のために。 明らかな書き換えは `:before` にグラデーションを置き、それを翻訳することです。 それは、 何もレンダリングされず、理由は維持する価値があります: これらのカードは `<GradientBorder className="... hexagon-border-glow">` なので、 1 要素は 両方のクラス — と `.hexagon-border-glow::before` は既に存在している hexagon-clipped, ブルレッドホバーが `opacity: 0` で輝きます。 要素は正確に1つを持っています ::before なので、ルールはマージされ、グラデーションは不可視を継承しました。 クリップパスとブラー。 "overflow: hidden` は 200%-wide をクリップするために必要な sweep は、glow の `inset: -4px` と hover を破棄した。 なので、スイープは独自の要素を取得します。これは衝突できません。` track` は クリップ、および ` sweep` を gradient に対して 50% を変換する幅として 2 回 その中間点で繰り返すので、ループは継ぎ目がありません。 スクリーンショットを2xで作成し、CSSを読んでいない: 青紫色のヘアラインは現われ、マッチします。 コンソールと問題のクリーン, すべて ガードパス.