常連

### swellという有料テーマを使っています。
###やりたいこと、やっていること
[参考サイト](https://www.kyomura.jp)
このような感じで最初に白い画面が出て、その上にsvg画像をアニメーションで一文字づつ出るようにし、メインヴィジュアルの上に残るように設定しています。

###困っていること。

- メインヴィジョンが先に表示されず、下の要素が先にレンダリングされることが時々あること
- svg画像の表示が遅く白い背景が下に下がってから、svgのアニメーションが動き始めること

長くて見づらいとは思いますが、どうかお願いします。
###やってみたこと
animationからTransitionに変えてみた
アニメーションのCSSの読み込み位置を変えてみた
上がキャッシュが残っている状態
下が削除した時の開発者ツールの画面です。
![アニメーション成功時](d6503d93fb853d6137d72167b061c057.png)
![アニメーション失敗時](a87ff219e1ec3cc4439a8c7ce8439fd2.png)

##メインビジュアル部分
```php
<?php
if ( ! defined( 'ABSPATH' ) ) exit;

$SETTING  = SWELL_FUNC::get_setting();
$mv_type  = $SETTING['main_visual_type'];
$mv_class = 'p-mainVisual';

// スライド / １枚画像 / 動画 で処理を分ける
if ( 'slider' === $mv_type ) {
	$slider_images = [
		$SETTING['slider1_img'],
		$SETTING['slider2_img'],
		$SETTING['slider3_img'],
		$SETTING['slider4_img'],
		$SETTING['slider5_img'],
	];
	$slider_images = array_filter( $slider_images, 'strlen' ); // 空要素削除

	if ( count( $slider_images ) > 1 ) {

		$mv_class .= ' -type-slider -motion-' . $SETTING['mv_slide_animation'];

		$parts_name = 'parts/top/main_visual-slider';
		$variable   = $slider_images;

	} else {

		$mv_class  .= ' -type-single';
		$parts_name = 'parts/top/main_visual-single';
		$variable   = null;

	}
} elseif ( 'movie' === $mv_type ) {

	$mv_class  .= ' -type-movie';
	$parts_name = 'parts/top/main_visual-movie';
	$variable   = null;

}

// スライダーの高さ
$slide_size = $SETTING['mv_slide_size'];
$mv_class  .= ' -height-' . $slide_size;


// 余白ありかどうか
if ( $SETTING['mv_on_margin'] ) {
	$mv_class .= ' -margin-on';
}

?>
<div id="main_visual" class="<?=esc_attr( $mv_class )?>">
<div id="canvas-container" class="canvas-wrapper">
	<canvas id="sineCanvas" width="100%" height="200"></canvas>
</div>


<svg class="t-svg" id="layer-svg" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 539.8 190.16" width="539.7999877929688" height="190.16000366210938"><defs><style>.cls-1{fill:#dbdcdc;}</style></defs></svg>

<?php
	SWELL_FUNC::get_parts( $parts_name, $variable );
	do_action( 'swell_inner_main_visual' );
?>
</div>
```

##footer.php
```php
</footer>
<?php
if(is_front_page() or is_home()){
  echo'<div id="loading" class=""><div class="curtain"></div></div>';
}
?>
```
##css
```css
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/***************************************************
 * Generated by SVG Artista on 7/1/2021, 5:21:42 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-2 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-3 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-4 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-5 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-6 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-7 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-8 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-9 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-10 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-11 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-12 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-13 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-14 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-15 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
  fill: rgb(219, 220, 220);
}

@media screen and (max-width: 641px) {
  .t-svg{
    width: 270px;
    top: 43%;
  }
  .f-town-bg {
    height: 150px;
    width: 100%;
    background-image: url(assets/images/town-bg.png);
    background-position-x: -60px;
}
}

.t-svg {
z-index: 11 !important;
position: absolute;
top: 50%;
left: 50%;
margin: auto;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
```

##header.phpの</header>の直前に記述
```JavaScript
<script>
window.onload = function () {
    var obj = document.getElementById("layer-svg");
    obj.classList.add("active");
};
</script>
```
##htmlファイルは文字数が多かったのでこちらで共有します。
[htmlのソースコード](https://codepen.io/azulily/pen/RwVPyZM)

キャッシュを空にした時にアニメーションが動かない

### swellという有料テーマを使っています。
###やりたいこと、やっていること
[参考サイト](https://www.kyomura.jp)
このような感じで最初に白い画面が出て、その上にsvg画像をアニメーションで一文字づつ出るようにし、メインヴィジュアルの上に残るように設定しています。

###困っていること。

- メインヴィジョンが先に表示されず、下の要素が先にレンダリングされることが時々あること
- svg画像の表示が遅く白い背景が下に下がってから、svgのアニメーションが動き始めること

長くて見づらいとは思いますが、どうかお願いします。
###やってみたこと
animationからTransitionに変えてみた
アニメーションのCSSの読み込み位置を変えてみた
上がキャッシュが残っている状態
下が削除した時の開発者ツールの画面です。
![アニメーション成功時](d6503d93fb853d6137d72167b061c057.png)
![アニメーション失敗時](a87ff219e1ec3cc4439a8c7ce8439fd2.png)

##メインビジュアル部分
```php
<?php
if ( ! defined( 'ABSPATH' ) ) exit;

$SETTING  = SWELL_FUNC::get_setting();
$mv_type  = $SETTING['main_visual_type'];
$mv_class = 'p-mainVisual';

// スライド / １枚画像 / 動画 で処理を分ける
if ( 'slider' === $mv_type ) {
	$slider_images = [
		$SETTING['slider1_img'],
		$SETTING['slider2_img'],
		$SETTING['slider3_img'],
		$SETTING['slider4_img'],
		$SETTING['slider5_img'],
	];
	$slider_images = array_filter( $slider_images, 'strlen' ); // 空要素削除

	if ( count( $slider_images ) > 1 ) {

		$mv_class .= ' -type-slider -motion-' . $SETTING['mv_slide_animation'];

		$parts_name = 'parts/top/main_visual-slider';
		$variable   = $slider_images;

	} else {

		$mv_class  .= ' -type-single';
		$parts_name = 'parts/top/main_visual-single';
		$variable   = null;

	}
} elseif ( 'movie' === $mv_type ) {

	$mv_class  .= ' -type-movie';
	$parts_name = 'parts/top/main_visual-movie';
	$variable   = null;

}

// スライダーの高さ
$slide_size = $SETTING['mv_slide_size'];
$mv_class  .= ' -height-' . $slide_size;


// 余白ありかどうか
if ( $SETTING['mv_on_margin'] ) {
	$mv_class .= ' -margin-on';
}

?>
<div id="main_visual" class="<?=esc_attr( $mv_class )?>">
<div id="canvas-container" class="canvas-wrapper">
	<canvas id="sineCanvas" width="100%" height="200"></canvas>
</div>


<svg class="t-svg" id="layer-svg" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 539.8 190.16" width="539.7999877929688" height="190.16000366210938"><defs><style>.cls-1{fill:#dbdcdc;}</style></defs></svg>

<?php
	SWELL_FUNC::get_parts( $parts_name, $variable );
	do_action( 'swell_inner_main_visual' );
?>
</div>
```

##footer.php
```php
</footer>
<?php
if(is_front_page() or is_home()){
  echo'<div id="loading" class=""><div class="curtain"></div></div>';
}
?>
```
##css
```css
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/***************************************************
 * Generated by SVG Artista on 7/1/2021, 5:21:42 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-2 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-3 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-4 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-5 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-6 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-7 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-8 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-9 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-10 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-11 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-12 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-13 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-14 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
  fill: rgb(219, 220, 220);
}

svg .svg-elem-15 {
  fill: transparent;
  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
  fill: rgb(219, 220, 220);
}

@media screen and (max-width: 641px) {
  .t-svg{
    width: 270px;
    top: 43%;
  }
  .f-town-bg {
    height: 150px;
    width: 100%;
    background-image: url(assets/images/town-bg.png);
    background-position-x: -60px;
}
}

.t-svg {
z-index: 11 !important;
position: absolute;
top: 50%;
left: 50%;
margin: auto;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
```

##header.phpの</header>の直前に記述
```JavaScript
<script>
window.onload = function () {
    var obj = document.getElementById("layer-svg");
    obj.classList.add("active");
};
</script>
```

@@ -597,3 +597,7 @@
 </script>
 ```
+##htmlファイルは文字数が多かったのでこちらで共有します。
+[htmlのソースコード](https://codepen.io/azulily/pen/RwVPyZM)

質問編集履歴