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

swellという有料テーマを使っています。

###やりたいこと、やっていること
参考サイト
このような感じで最初に白い画面が出て、その上にsvg画像をアニメーションで一文字づつ出るようにし、メインヴィジュアルの上に残るように設定しています。

###困っていること。

メインヴィジョンが先に表示されず、下の要素が先にレンダリングされることが時々あること
svg画像の表示が遅く白い背景が下に下がってから、svgのアニメーションが動き始めること

長くて見づらいとは思いますが、どうかお願いします。
###やってみたこと
animationからTransitionに変えてみた
アニメーションのCSSの読み込み位置を変えてみた
上がキャッシュが残っている状態
下が削除した時の開発者ツールの画面です。

##メインビジュアル部分

php
1<?php
2if ( ! defined( 'ABSPATH' ) ) exit;
3
4$SETTING  = SWELL_FUNC::get_setting();
5$mv_type  = $SETTING['main_visual_type'];
6$mv_class = 'p-mainVisual';
7
8// スライド / １枚画像 / 動画 で処理を分ける
9if ( 'slider' === $mv_type ) {
10	$slider_images = [
11		$SETTING['slider1_img'],
12		$SETTING['slider2_img'],
13		$SETTING['slider3_img'],
14		$SETTING['slider4_img'],
15		$SETTING['slider5_img'],
16	];
17	$slider_images = array_filter( $slider_images, 'strlen' ); // 空要素削除
18
19	if ( count( $slider_images ) > 1 ) {
20
21		$mv_class .= ' -type-slider -motion-' . $SETTING['mv_slide_animation'];
22
23		$parts_name = 'parts/top/main_visual-slider';
24		$variable   = $slider_images;
25
26	} else {
27
28		$mv_class  .= ' -type-single';
29		$parts_name = 'parts/top/main_visual-single';
30		$variable   = null;
31
32	}
33} elseif ( 'movie' === $mv_type ) {
34
35	$mv_class  .= ' -type-movie';
36	$parts_name = 'parts/top/main_visual-movie';
37	$variable   = null;
38
39}
40
41// スライダーの高さ
42$slide_size = $SETTING['mv_slide_size'];
43$mv_class  .= ' -height-' . $slide_size;
44
45
46// 余白ありかどうか
47if ( $SETTING['mv_on_margin'] ) {
48	$mv_class .= ' -margin-on';
49}
50
51?>
52<div id="main_visual" class="<?=esc_attr( $mv_class )?>">
53<div id="canvas-container" class="canvas-wrapper">
54	<canvas id="sineCanvas" width="100%" height="200"></canvas>
55</div>
56
57
58<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>
59
60<?php
61	SWELL_FUNC::get_parts( $parts_name, $variable );
62	do_action( 'swell_inner_main_visual' );
63?>
64</div>

##footer.php

php
1</footer>
2<?php
3if(is_front_page() or is_home()){
4  echo'<div id="loading" class=""><div class="curtain"></div></div>';
5}
6?>

##css

css
1/*
2    Template: swell
3    Theme Name: SWELL CHILD
4    Theme URI: https://swell-theme.com/
5    Description: SWELLの子テーマ
6    Version: 1.0.0
7    Author: LOOS WEB STUDIO
8    Author URI: https://loos-web-studio.com/
9
10    License: GNU General Public License
11    License URI: http://www.gnu.org/licenses/gpl.html
12*/
13
14/***************************************************
15 * Generated by SVG Artista on 7/1/2021, 5:21:42 PM
16 * MIT license (https://opensource.org/licenses/MIT)
17 * W. https://svgartista.net
18 **************************************************/
19
20svg .svg-elem-1 {
21  fill: transparent;
22  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
23          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
24}
25
26svg.active .svg-elem-1 {
27  fill: rgb(219, 220, 220);
28}
29
30svg .svg-elem-2 {
31  fill: transparent;
32  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
33          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
34}
35
36svg.active .svg-elem-2 {
37  fill: rgb(219, 220, 220);
38}
39
40svg .svg-elem-3 {
41  fill: transparent;
42  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
43          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
44}
45
46svg.active .svg-elem-3 {
47  fill: rgb(219, 220, 220);
48}
49
50svg .svg-elem-4 {
51  fill: transparent;
52  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
53          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
54}
55
56svg.active .svg-elem-4 {
57  fill: rgb(219, 220, 220);
58}
59
60svg .svg-elem-5 {
61  fill: transparent;
62  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
63          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
64}
65
66svg.active .svg-elem-5 {
67  fill: rgb(219, 220, 220);
68}
69
70svg .svg-elem-6 {
71  fill: transparent;
72  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
73          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
74}
75
76svg.active .svg-elem-6 {
77  fill: rgb(219, 220, 220);
78}
79
80svg .svg-elem-7 {
81  fill: transparent;
82  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
83          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
84}
85
86svg.active .svg-elem-7 {
87  fill: rgb(219, 220, 220);
88}
89
90svg .svg-elem-8 {
91  fill: transparent;
92  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
93          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
94}
95
96svg.active .svg-elem-8 {
97  fill: rgb(219, 220, 220);
98}
99
100svg .svg-elem-9 {
101  fill: transparent;
102  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
103          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
104}
105
106svg.active .svg-elem-9 {
107  fill: rgb(219, 220, 220);
108}
109
110svg .svg-elem-10 {
111  fill: transparent;
112  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
113          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
114}
115
116svg.active .svg-elem-10 {
117  fill: rgb(219, 220, 220);
118}
119
120svg .svg-elem-11 {
121  fill: transparent;
122  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
123          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
124}
125
126svg.active .svg-elem-11 {
127  fill: rgb(219, 220, 220);
128}
129
130svg .svg-elem-12 {
131  fill: transparent;
132  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
133          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
134}
135
136svg.active .svg-elem-12 {
137  fill: rgb(219, 220, 220);
138}
139
140svg .svg-elem-13 {
141  fill: transparent;
142  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
143          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
144}
145
146svg.active .svg-elem-13 {
147  fill: rgb(219, 220, 220);
148}
149
150svg .svg-elem-14 {
151  fill: transparent;
152  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
153          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
154}
155
156svg.active .svg-elem-14 {
157  fill: rgb(219, 220, 220);
158}
159
160svg .svg-elem-15 {
161  fill: transparent;
162  -webkit-transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
163          transition: fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
164}
165
166svg.active .svg-elem-15 {
167  fill: rgb(219, 220, 220);
168}
169
170@media screen and (max-width: 641px) {
171  .t-svg{
172    width: 270px;
173    top: 43%;
174  }
175  .f-town-bg {
176    height: 150px;
177    width: 100%;
178    background-image: url(assets/images/town-bg.png);
179    background-position-x: -60px;
180}
181}
182
183.t-svg {
184z-index: 11 !important;
185position: absolute;
186top: 50%;
187left: 50%;
188margin: auto;
189transform: translateY(-50%) translateX(-50%);
190-webkit- transform: translateY(-50%) translateX(-50%);
191}

##header.phpの</header>の直前に記述

JavaScript
1<script>
2window.onload = function () {
3    var obj = document.getElementById("layer-svg");
4    obj.classList.add("active");
5};
6</script>

##htmlファイルは文字数が多かったのでこちらで共有します。
htmlのソースコード

runnynose

2021/07/02 03:24

ブラウザが認識できるのはhtmlなので、差し支えなければphpのソースよりもphp処理後のhtmlを記載した方が回答を得られやすいかも知れないです。 ※サーバー処理後の結果になるので、個人情報など秘匿な内容が含まれてないかご注意ください。以下でソースを取得できるかと思います。 1. ブラウザで対象画面を開く 2. 右クリック 3. ページのソースを表示