質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

1568閲覧

SVG 縁取りアニメーションの開始時間を早めたい

chibiyuko_0124

総合スコア18

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

1クリップ

投稿2020/03/26 06:57

編集2020/03/27 00:05

いつもお世話になっております。
下記urlのコードを参考にsvg縁取りアニメーションを導入しております。
が、アニメーションがはじまるまでに少し間があって、この間を少なくできる方法を教えていただきたいです。

■アニメーションイメージ

HTML

1<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 2 y="0px" viewBox="0 0 734.02 179.85" style="enable-background:new 0 0 200 80;" xml:space="preserve"> 3< class="st0"> 4<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"/> 5</g> 6</svg>

css

1.st1{ 2 fill:#0060e6; 3 stroke:#0060e6; 4 stroke-dasharray: 2000; 5 stroke-dashoffset: 0; 6 stroke-width: 1; 7 -webkit-animation: hello 4s ease-in 0s; 8 animation: hello 4s ease-in 0s; 9} 10 11@-webkit-keyframes hello { 12 0% { 13 stroke-dashoffset: 2000; 14 fill:transparent; 15 } 16 40% { 17 stroke-dashoffset: 2000; 18 fill:transparent; 19 } 20 50% { 21 fill:transparent; 22 } 23 100% { 24 stroke-dashoffset: 0; 25 fill:#0060e6; 26 } 27}

Javascript

1$(window).on('load', function () { 2 $('path').addClass('cover'); 3});

実際のページにはローディング画面があるため、その後に発火させたいためロード後にclassを付与させています。

お知恵をお貸しいただけますと幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/03/26 07:07

ソースコードを見てみないとなんとも言えないので、 自身が書いたソースコードの記載をお願いします。 あと、一応ですが、対象ブラウザの記載もお願いします。
chibiyuko_0124

2020/03/26 23:59

miyabi_takatsuk様 コメントいただきありがとうございます。 @-webkit-keyframes hello内の調整で解消しました。
guest

回答1

0

ベストアンサー

アニメーションがはじまるまでに少し間があって

とりあえずcssの @-webkit-keyframes hello から
40%と50%を取っ払っちゃうと良いのでは?

投稿2020/03/26 07:16

yambejp

総合スコア114757

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chibiyuko_0124

2020/03/26 23:59

yambejp様 いただいたやり方で解決しました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問