上記のコードは飽くまでサンプルなので、CSSのみなら

.carousel {
  opacity: 0;
  animation: fade-in 0.5s ease-out 1s forwards;
}

@keyframes fade-in {
  100% {
    opacity: 1;
  }
}

のように実行タイミングを遅らせたアニメーションや、JSで

$(window).load(function(){
  $('#carousel').addClass('loaded');
});

読み込み後にカルーセル表示を実行するようにし、

.carousel {
  opacity: 0;
  transition: all 1s ease-out;
}

.carousel.loaded {
  opacity: 1;
}

クラスの追加前後で表示を変えるアニメーションなどは試してみましたか？

ただ、画面表示時に添付画像のような表示状態になるのが嫌だと言われて、現在も仕様にしたんでした。

表示時にフェードインのようなエフェクトが必要なのであれば、前回の返信でも書いたようにCSSアニメーション等で表現するのがよいのではないでしょうか。

.carousel {
  animation: fade-in 1.5s ease-in-out;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

飽くまでサンプルですが、このような方法だと高さの位置ズレはなくなるので、CLSの数値が著しく悪化することはないと思います。

ろこ氏の意見に同意でなるほどと思いました。

改善されることを願っております。

自分の環境以外でも、有効な手段かどうか確認したくて。

昨日はざっとコードを見ただけで投稿したので説明不足だったかもしれませんが、以下で説明したような項目またはCLSに関するドキュメントを確認していただければ分かる通り、CLS対策としては誤った修正方法だと思います。

カルーセル内の個々のカードリンクは縦幅が決まっているわけではないので、

• モバイルでの表示（レスポンシブ）
• サムネイル画像の縦横比率
• 記事タイトルの長さ

なども確認しないといけません。

https://github.com/yhira/cocoon/commit/4a001dfa192dda20c1082174cc060618e53b3f8e

時点での修正ではまだカルーセル前後の正しいCLS数値を測定するのは困難なのと、fadeInに対して

.carousel-in {
  display: none;
}

とでもした後にカードの高さを固定するのに詰まります。

カルーセルにおけるCLSの問題は、このfadeInによってCSSのdisplayプロパティの値をnone⇒blockにしている点なので、CLSの数値を優先させるならば、表示時の高さが保持できるCSSアニメーション等で書き換えるのが正しい対策ではないでしょうか。

実際に、修正前の状態で

.carousel {
  display: none;
}

を削除し、

$('.carousel').fadeIn(1000);

の動作がなくなるだけで数値的には改善するはずです。

投稿者:: @lococo

試作版について、heightを196pxで固定してしまうのは様々な不具合の原因になり得ると思います。

もちろん、それは承知していて、いつもだったら書かないような以下のようなことを書きました。

試しに改善版をアップしてみました（※あくまで試作版なので完全な状態ではないかもしれません。採用するかもまだ未定です）。

自分の環境以外でも、有効な手段かどうか確認したくて。
あとは、これをどう落とし込むかなんですけど、今のところこれだという方法は思いついていません（これが思いついてないので現在の仕様になっているともいえます）。
とりあえず、GitHubは一旦Revertしておくつもりです。

とりあえず今後、考えてみます。

試しに改善版をアップしてみました（※あくまで試作版なので完全な状態ではないかもしれません。採用するかもまだ未定です）。

試作版について、heightを196pxで固定してしまうのは様々な不具合の原因になり得ると思います。

カルーセル内の個々のカードリンクは縦幅が決まっているわけではないので、

• モバイルでの表示（レスポンシブ）
• サムネイル画像の縦横比率
• 記事タイトルの長さ

なども確認しないといけません。