teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問SVG　縁取りアニメーションの開始時間を早めたい

編集履歴

質問編集履歴

2

コード修正

2020/03/27 00:05

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -20,15 +20,15 @@
20
20
 
21
21
  </g>
22
22
 
23
- </svg>```
23
+ </svg>
24
+
25
+ ```
24
26
 
25
27
 
26
28
 
27
29
  ```css
28
30
 
29
-
30
-
31
- .cover{
31
+ .st1{
32
32
 
33
33
  fill:#0060e6;
34
34
 
@@ -48,41 +48,43 @@
48
48
 
49
49
 
50
50
 
51
- @-webkit-keyframes hello {
51
+ @-webkit-keyframes hello {
52
52
 
53
- 0% {
53
+ 0% {
54
54
 
55
- stroke-dashoffset: 2000;
55
+ stroke-dashoffset: 2000;
56
56
 
57
- fill:transparent;
57
+ fill:transparent;
58
58
 
59
- }
59
+ }
60
60
 
61
- 40% {
61
+ 40% {
62
62
 
63
- stroke-dashoffset: 2000;
63
+ stroke-dashoffset: 2000;
64
64
 
65
- fill:transparent;
65
+ fill:transparent;
66
66
 
67
- }
67
+ }
68
68
 
69
- 50% {
69
+ 50% {
70
70
 
71
- fill:transparent;
71
+ fill:transparent;
72
72
 
73
- }
73
+ }
74
74
 
75
- 100% {
75
+ 100% {
76
76
 
77
- stroke-dashoffset: 0;
77
+ stroke-dashoffset: 0;
78
78
 
79
- fill:#0060e6;
79
+ fill:#0060e6;
80
80
 
81
- }
81
+ }
82
82
 
83
- }
83
+ }
84
84
 
85
85
  ```
86
+
87
+
86
88
 
87
89
  ```Javascript
88
90
 
@@ -96,6 +98,8 @@
96
98
 
97
99
 
98
100
 
101
+
102
+
99
103
  実際のページにはローディング画面があるため、その後に発火させたいためロード後にclassを付与させています。
100
104
 
101
105
 

1

今後の参考のためコード追加

2020/03/27 00:05

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,91 @@
8
8
 
9
9
  ■アニメーションイメージ
10
10
 
11
- https://codepen.io/chibiyuko_0124/pen/abOQwmd
11
+ ```HTML
12
+
13
+ <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
14
+
15
+ y="0px" viewBox="0 0 734.02 179.85" style="enable-background:new 0 0 200 80;" xml:space="preserve">
16
+
17
+ < class="st0">
18
+
19
+ <path class="cls-1" d="M48.69,66.54a64.56,64.56,0,0,0-1.88-8.46L44.7,51.43H22.39l-2.12,6.65a45.53,45.53,0,0,0-1.95,8.46H0A78.23,78.23,0,0,0,3.76,57L20.67,9.86a48.19,48.19,0,0,0,2.5-8.45H43.6a63.59,63.59,0,0,0,2.66,8.45L63.25,57C64.74,61.13,66,64.34,67,66.54ZM33.42,14.79,26.14,38.28H40.86Z"/><path class="cls-1" d="M91.82,66.54c-5.95,0-8.22.07-11.58.23a74.71,74.71,0,0,0,.62-11.51V12.45a86.74,86.74,0,0,0-.62-11.28c4,.24,5.09.24,11.5.24h20.51c12.68,0,20.12,6.1,20.12,16.44,0,4.77-1.57,8.53-4.54,11.19a17.57,17.57,0,0,1-6.34,3.45c3.83.86,5.87,1.8,8.14,3.75,3.37,3,5.09,7.2,5.09,12.37,0,11.27-8,17.93-21.61,17.93Zm18.16-40c4.15,0,6.73-2.43,6.73-6.27s-2.42-6-6.88-6H96.21V26.54ZM96.21,53.62h14.4c4.93,0,7.9-2.74,7.9-7.36s-3-7.2-8-7.2H96.21Z"/><path class="cls-1" d="M192.25,24.11c-1.48-7.12-5.63-10.65-12.36-10.65-9.55,0-15.11,7.52-15.11,20.43s5.79,20.51,15.5,20.51a12.34,12.34,0,0,0,10.25-4.93c1.33-1.88,1.88-3.44,2.35-6.73l16.28,2.43c-1.49,6.65-3.21,10.49-6.49,14.32C197.81,65.05,190.22,68,180.75,68s-17.62-3-23.17-8.61c-5.79-5.87-9.08-15-9.08-25.52S151.79,14.25,158,8.14C163.37,2.9,171.28,0,180.43,0c10.1,0,18,3.44,23.1,10.25A24.27,24.27,0,0,1,208.38,21Z"/><path class="cls-1" d="M225.13,12.68a67.15,67.15,0,0,0-.7-11.51c3.13.16,5.09.24,11.58.24h16.36c9.63,0,17.38,2.66,22.62,7.75,5.72,5.63,8.62,13.85,8.62,24.26,0,10.73-3.14,19.34-9.09,25.29-5.24,5.16-12.68,7.83-22,7.83H236c-6,0-8.22.07-11.5.23a74.79,74.79,0,0,0,.62-11.43Zm26,40.16c5.09,0,8.69-1.33,11.51-4.15,3.21-3.29,4.93-8.53,4.93-15S266.07,22.15,263,19.1c-2.74-2.74-6.5-4-12.14-4H240.63V52.84Z"/><path class="cls-1" d="M348.34,67.08a101,101,0,0,0-12.91-.54H310.77c-5.95,0-8.14.07-11.51.23a72,72,0,0,0,.63-11.43V12.6a83,83,0,0,0-.63-11.43c3.21.16,5.4.24,11.51.24h25A96.33,96.33,0,0,0,347.4.86V15.5A96.33,96.33,0,0,0,335.74,15H315.39V26.46h16.9A93.86,93.86,0,0,0,344,25.91V40.39a97,97,0,0,0-11.75-.55h-16.9V53h20.19a106.54,106.54,0,0,0,12.76-.54Z"/><path class="cls-1" d="M380.36,52.92c0,7.35.08,10.17.63,13.62H364.16a81.09,81.09,0,0,0,.7-13.39V12.6a78.7,78.7,0,0,0-.63-11.43c3.21.16,5.4.24,11.43.24h22.63A92.69,92.69,0,0,0,411.44.86V15.73a106.72,106.72,0,0,0-13.08-.54h-18V28h14.72a101.32,101.32,0,0,0,12.52-.54V42a102.63,102.63,0,0,0-12.52-.55H380.36Z"/><path class="cls-1" d="M463.8,42.74a50.66,50.66,0,0,0-7.75.39V29.28a67,67,0,0,0,10.26.47h6.26c4,0,6.89-.08,10.33-.4A74.82,74.82,0,0,0,482.36,40v8.77a80,80,0,0,0,.54,11.66A38.42,38.42,0,0,1,473,65.36,52.29,52.29,0,0,1,456.37,68c-9.94,0-17.69-2.74-23.25-8.37-5.95-5.95-9.24-15.27-9.24-26C423.88,13.07,436.33,0,456.05,0c9.79,0,17.23,3.05,22.39,9.32a22.54,22.54,0,0,1,4.62,8.53l-16,3.68c-.86-2.82-1.8-4.31-3.52-5.64a12.11,12.11,0,0,0-7.91-2.43c-10,0-15.5,7.28-15.5,20.43,0,7.28,1.65,12.92,4.78,16.36,2.5,2.74,6.34,4.23,11.27,4.23a23.4,23.4,0,0,0,11.35-2.82V42.74Z"/><path class="cls-1" d="M558.29,1.41A74.18,74.18,0,0,0,557.66,13V55a83.18,83.18,0,0,0,.63,11.59H541.46A75.87,75.87,0,0,0,542.08,55V39.77H515.7V55a80.38,80.38,0,0,0,.63,11.59H499.5A74.32,74.32,0,0,0,500.13,55V13a76.08,76.08,0,0,0-.63-11.58h16.83A83.77,83.77,0,0,0,515.7,13V26h26.38V13a73.76,73.76,0,0,0-.62-11.58Z"/><path class="cls-1" d="M593.12,1.41A72.56,72.56,0,0,0,592.5,13V55a75.87,75.87,0,0,0,.62,11.59H575.9A75,75,0,0,0,576.53,55V13a72.88,72.88,0,0,0-.63-11.58Z"/><path class="cls-1" d="M654.73,1.41c-.55,3.44-.63,5.79-.63,12.6V46.65c0,6.42-1.72,11.35-5.4,15-4,4.07-10.33,6.34-18,6.34-8.54,0-15-2.42-19.34-7.28-2.27-2.5-3.36-4.46-5.16-9.16l15.26-5.24c1.64,6.11,4,8.3,9,8.3,5.25,0,7.67-2.59,7.67-8V14.09a84.23,84.23,0,0,0-.62-12.68Z"/><path class="cls-1" d="M725.73,55A129.21,129.21,0,0,0,734,66.54H713.67a91.85,91.85,0,0,0-5.4-10L696.14,37.18l-7.91,7.91V55a88.45,88.45,0,0,0,.63,11.59h-16.6A88.45,88.45,0,0,0,672.89,55V13a85.28,85.28,0,0,0-.63-11.58h16.6A86.72,86.72,0,0,0,688.23,13V26.85l15.58-16.67a47.68,47.68,0,0,0,6.81-8.77h21.13c-1.4,1.41-2,2-3,3.13L723.22,10,706.86,27.16Z"/><path class="cls-1" d="M48.69,178.36a64.75,64.75,0,0,0-1.88-8.45l-2.11-6.65H22.39l-2.12,6.65a45.62,45.62,0,0,0-1.95,8.45H0a76.87,76.87,0,0,0,3.76-9.55l16.91-47.12a48.19,48.19,0,0,0,2.5-8.45H43.6a63.59,63.59,0,0,0,2.66,8.45l17,47.12C64.74,173,66,176.17,67,178.36ZM33.42,126.62l-7.28,23.49H40.86Z"/><path class="cls-1" d="M91.82,178.36c-5.95,0-8.22.08-11.58.24a74.71,74.71,0,0,0,.62-11.51V124.27A86.68,86.68,0,0,0,80.24,113c4,.24,5.09.24,11.5.24h20.51c12.68,0,20.12,6.1,20.12,16.44,0,4.77-1.57,8.53-4.54,11.19a17.42,17.42,0,0,1-6.34,3.44c3.83.87,5.87,1.8,8.14,3.76,3.37,3,5.09,7.2,5.09,12.37,0,11.27-8,17.92-21.61,17.92Zm18.16-40c4.15,0,6.73-2.42,6.73-6.26s-2.42-6-6.88-6H96.21v12.28ZM96.21,165.45h14.4c4.93,0,7.9-2.74,7.9-7.36s-3-7.2-8-7.2H96.21Z"/><path class="cls-1" d="M192.25,135.94c-1.48-7.13-5.63-10.65-12.36-10.65-9.55,0-15.11,7.52-15.11,20.43,0,12.76,5.79,20.51,15.5,20.51a12.34,12.34,0,0,0,10.25-4.93c1.33-1.88,1.88-3.44,2.35-6.73L209.16,157c-1.49,6.66-3.21,10.49-6.49,14.33-4.86,5.56-12.45,8.53-21.92,8.53s-17.62-3-23.17-8.61c-5.79-5.87-9.08-15-9.08-25.52S151.79,126.08,158,120c5.4-5.24,13.31-8.14,22.46-8.14,10.1,0,18,3.44,23.1,10.25a24.27,24.27,0,0,1,4.85,10.73Z"/><path class="cls-1" d="M225.13,124.51a67.15,67.15,0,0,0-.7-11.51c3.13.16,5.09.24,11.58.24h16.36c9.63,0,17.38,2.66,22.62,7.75,5.72,5.63,8.62,13.85,8.62,24.26,0,10.73-3.14,19.34-9.09,25.29-5.24,5.16-12.68,7.82-22,7.82H236c-6,0-8.22.08-11.5.24a74.79,74.79,0,0,0,.62-11.43Zm26,40.16c5.09,0,8.69-1.33,11.51-4.15,3.21-3.29,4.93-8.53,4.93-15,0-6.66-1.49-11.51-4.54-14.56-2.74-2.74-6.5-4-12.14-4H240.63v37.73Z"/><path class="cls-1" d="M348.34,178.91a100.56,100.56,0,0,0-12.91-.55H310.77c-5.95,0-8.14.08-11.51.24a72,72,0,0,0,.63-11.43V124.43a83,83,0,0,0-.63-11.43c3.21.16,5.4.24,11.51.24h25a96.33,96.33,0,0,0,11.66-.55v14.64a96.33,96.33,0,0,0-11.66-.55H315.39v11.51h16.9a93.86,93.86,0,0,0,11.75-.55v14.48a97,97,0,0,0-11.75-.55h-16.9v13.15h20.19a104,104,0,0,0,12.76-.55Z"/><path class="cls-1" d="M380.36,164.74c0,7.36.08,10.18.63,13.62H364.16c.54-3.44.7-6.57.7-13.38V124.43a78.7,78.7,0,0,0-.63-11.43c3.21.16,5.4.24,11.43.24h22.63a92.69,92.69,0,0,0,13.15-.55v14.87a106.24,106.24,0,0,0-13.08-.55h-18v12.84h14.72a99,99,0,0,0,12.52-.55v14.49a100.62,100.62,0,0,0-12.52-.55H380.36Z"/><path class="cls-1" d="M463.8,154.57a50.66,50.66,0,0,0-7.75.39V141.1a65.66,65.66,0,0,0,10.26.47h6.26c4,0,6.89-.07,10.33-.39a74.82,74.82,0,0,0-.54,10.65v8.77a80,80,0,0,0,.54,11.66,38.42,38.42,0,0,1-9.94,4.93,52.29,52.29,0,0,1-16.59,2.66c-9.94,0-17.69-2.74-23.25-8.37-5.95-5.95-9.24-15.27-9.24-26,0-20.59,12.45-33.66,32.17-33.66,9.79,0,17.23,3,22.39,9.31a22.67,22.67,0,0,1,4.62,8.54l-16,3.68c-.86-2.82-1.8-4.31-3.52-5.64a12.11,12.11,0,0,0-7.91-2.43c-10,0-15.5,7.28-15.5,20.43,0,7.28,1.65,12.92,4.78,16.36,2.5,2.74,6.34,4.23,11.27,4.23a23.4,23.4,0,0,0,11.35-2.82v-8.92Z"/><path class="cls-1" d="M558.29,113.24a74.18,74.18,0,0,0-.63,11.58v42a82.94,82.94,0,0,0,.63,11.58H541.46a75.64,75.64,0,0,0,.62-11.58V151.59H515.7v15.19a80.14,80.14,0,0,0,.63,11.58H499.5a74.09,74.09,0,0,0,.63-11.58v-42a76.08,76.08,0,0,0-.63-11.58h16.83a83.77,83.77,0,0,0-.63,11.58v13h26.38v-13a73.76,73.76,0,0,0-.62-11.58Z"/><path class="cls-1" d="M593.12,113.24a72.56,72.56,0,0,0-.62,11.58v42a75.64,75.64,0,0,0,.62,11.58H575.9a74.83,74.83,0,0,0,.63-11.58v-42a72.88,72.88,0,0,0-.63-11.58Z"/><path class="cls-1" d="M654.73,113.24c-.55,3.44-.63,5.79-.63,12.6v32.64c0,6.42-1.72,11.35-5.4,15-4,4.07-10.33,6.34-18,6.34-8.54,0-15-2.42-19.34-7.28-2.27-2.5-3.36-4.46-5.16-9.16l15.26-5.24c1.64,6.1,4,8.3,9,8.3,5.25,0,7.67-2.59,7.67-8V125.92a84.23,84.23,0,0,0-.62-12.68Z"/><path class="cls-1" d="M725.73,166.78A127.14,127.14,0,0,0,734,178.36H713.67a92.75,92.75,0,0,0-5.4-9.94L696.14,149l-7.91,7.91v9.86a88.19,88.19,0,0,0,.63,11.58h-16.6a88.19,88.19,0,0,0,.63-11.58v-42a85.28,85.28,0,0,0-.63-11.58h16.6a86.72,86.72,0,0,0-.63,11.58v13.86L703.81,122a47.65,47.65,0,0,0,6.81-8.76h21.13c-1.4,1.41-2,2-3,3.13l-5.48,5.48L706.86,139Z"/>
20
+
21
+ </g>
22
+
23
+ </svg>```
24
+
25
+
26
+
27
+ ```css
28
+
29
+
30
+
31
+ .cover{
32
+
33
+ fill:#0060e6;
34
+
35
+ stroke:#0060e6;
36
+
37
+ stroke-dasharray: 2000;
38
+
39
+ stroke-dashoffset: 0;
40
+
41
+ stroke-width: 1;
42
+
43
+ -webkit-animation: hello 4s ease-in 0s;
44
+
45
+ animation: hello 4s ease-in 0s;
46
+
47
+ }
48
+
49
+
50
+
51
+ @-webkit-keyframes hello {
52
+
53
+ 0% {
54
+
55
+ stroke-dashoffset: 2000;
56
+
57
+ fill:transparent;
58
+
59
+ }
60
+
61
+ 40% {
62
+
63
+ stroke-dashoffset: 2000;
64
+
65
+ fill:transparent;
66
+
67
+ }
68
+
69
+ 50% {
70
+
71
+ fill:transparent;
72
+
73
+ }
74
+
75
+ 100% {
76
+
77
+ stroke-dashoffset: 0;
78
+
79
+ fill:#0060e6;
80
+
81
+ }
82
+
83
+ }
84
+
85
+ ```
86
+
87
+ ```Javascript
88
+
89
+ $(window).on('load', function () {
90
+
91
+ $('path').addClass('cover');
92
+
93
+ });
94
+
95
+ ```
12
96
 
13
97
 
14
98