У меня есть логотип SVG, который анимируется с помощью CSS. Он должен анимироваться сразу после загрузки страницы, но, похоже, с задержкой около 3 секунд. Страница содержит только навигацию, SVG и некоторый текст внизу. Я использую Materialise для форматирования.
Я попытался добавить отрицательную задержку и задержку анимации 0 с и попытался использовать префикс поставщика.
SVG в HTML
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 50 50">
<defs>
<style>
.st0 {
fill: #c09e56
}
</style>
<g id="lines">
<path id="a" class="st0" fill="#c09e56" d="M13.45 14.21l.1 15.79 1-.01-.1-16.29z" />
<path id="b" class="st0" fill="#c09e56" d="M16.37 12.72V27.5h1V12.21z" />
<path id="c" class="st0" fill="#c09e56" d="M13.53 29.75l.02 1.12.11.13L36.5 11.79v-1.35z" />
<path id="d" class="st0" fill="#c09e56" d="M13.6 33.68l.02 1.27.04.05L36.5 15.56V14.2z" />
<path id="e" class="st0" fill="#c09e56" d="M21.18 23.68l-.6.8L36.5 36.5v-1.25z" />
<path id="f" class="st0" fill="#c09e56" d="M21.59 27l-.59.8 15.5 12.12v-1.27z" />
</g>
</defs>
<use xlink:href="#lines" fill-opacity="0" stroke="#c09e56" />
</svg>
CSS
svg{
overflow:visible;
fill: #C09E56;
stroke: transparent;
stroke-width: 0;
width:200px;
height: 200px;
margin: auto;
}
path {
stroke: #C09E56;
stroke-width: 0.5;
stroke-dasharray: 100;
stroke-dashoffset: -100;
animation: draw 8s linear forwards;
animation-delay: -0.30s!important;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
fill:#C09E56;
}
}