4
Я работаю над анимацией рисования линии SVG, как показано ниже.Как управлять временем анимации CSS3
Так что я делаю это анимировать ухо с помощью stroke-dasharray и по-прежнему с точками.
Мне удалось закончить рисунок уха, но я не знаю, как контролировать время точек. Ниже приведены мои анимации шаги:
- Ear рисунок анимации в 5s
- После 5 секунд, по-прежнему с анимацией точек (анимировать построчно)
- Когда Закончите точки анимации, петля обратно на 1-й ступени
Это мой код, но он постепенно мигает. Как настроить время?
.firstpath {
stroke-dasharray: 1500;
animation: firstanimate 5s linear forwards infinite;
}
@keyframes firstanimate {
from {
stroke-dashoffset: 1500;
}
to {
stroke-dashoffset: 0;
}
}
.secondpath {
stroke-dasharray: 500;
animation: secondanimate 5s linear forwards infinite;
}
@keyframes secondanimate {
from {
stroke-dashoffset: 500;
}
to {
stroke-dashoffset: 0;
}
}
.thirdpath {
stroke-dasharray: 500;
animation: thirdanimate 5s linear forwards infinite;
}
@keyframes thirdanimate {
from {
stroke-dashoffset: 500;
}
to {
stroke-dashoffset: 0;
}
}
.row1col1 {
animation-delay: 1s;
animation: blink 2s step-start 0s infinite;
-webkit-animation: blink 2s step-start 0s infinite;
}
@keyframes blink {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">
<g>
<path class="firstpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
\t \t \t M253.441,284.167c0,0-0.883-14.535,15.429-18.551c5.364-1.32,15.943-0.665,21.667,6.79c13.859,18.051-3.235,32.286-8.087,37.262
\t \t \t c-4.853,4.979-7.713,21.027-17.543,20.528c-9.829-0.497-12.69-6.717-12.317-11.818" />
<path class="secondpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
\t \t \t M285.249,285.252c0,0,0.654-8.212-8.864-10.544c-9.519-2.334-16.796,8.211-10.825,17.449c2.613-1.12,5.226,0.652,5.599,2.52
\t \t \t c0.373,1.866-1.213,4.199-3.826,4.199" />
<path class="thirdpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
\t \t \t M257.815,307.553c0,0-3.732,5.879,2.333,8.118c6.065,2.241,5.318-8.118,8.865-9.237c3.545-1.119,11.943-2.519,11.943-10.265
\t \t \t c0-7.744-6.398-16.451-17.522-11.958" />
</g>
<line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627" />
<line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167" />
<line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171" />
<line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171" />
<line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171" />
<line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987" />
<line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142" />
</svg>
Я надеюсь, что обновленный фрагмент кода в моем ответе полностью решить вашу проблему. Если да, пожалуйста, подумайте о том, чтобы принять ответ (щелкните по пустому тику ниже кнопок голосования рядом с ответом). Обычно мы отмечаем проблему как * решаемую * здесь. – Harry
Да, вы сделали. Но мне нужно настроить время, чтобы сделать его быстрее. Большое вам спасибо за ваш ответ. Проголосовал вчера. – Eelyn
Извините, неправильно понимаю, я думал, вы сказали о голосовании. Я щелкнул его, потому что ваш ответ решил мою проблему. :) – Eelyn