How to control the timing of CSS3 animation
I'm working on the SVG line drawing animation as shown below.
So what am I doing is animate the ear by using stroke-dasharray and continue with the dots.
I managed to finish the ear drawing, but I don't know how to control the dots' timing. Following are my animation steps:
- Ear drawing animation within 5s
- After 5s, continue with the dots animation (animate row by row)
- When finish the dots animation, loop back to the 1st step
This is my code, but it blinking gradually. How do I adjust the timing?
.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="
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
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="
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
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="
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
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>Solution
The way the parts of the shape are formed, this would require multiple keyframe animations to work the way you intend for it to.
The following are what you have to do:
- The ear animation though it is expected to complete at
5smark should not start its next iteration till the animation of the lines are completed. That is, the ear should stay idle during the amount of time taken by the lines to complete their animation. Hence, we have to setanimation-durationfor the ear such that it covers the amount of time required for the lines to complete their animation. Here, each line component takes1sand so totalanimation-durationfor all elements (ear and lines) would be12s. - The ear animation should be complete at
5smark (out of a total duration of12s) and hence thefrom-tokeyframe setting should be replaced with percentages. Ear animation should start at0%and attain its completion at41%(which is roughly the5smark). From there, it should hold its position till100%(12s) mark (that is basically till the lines complete their animation). - Each line component should start after their previous part has completed its animation and so the
row1col1should start at41%which is when the ear becomes fully visible (till that point it should remain invisible). - The
row1col1needs1sto animation (which is roughly8%of12s) and hence therow1col2should wait till49%of the total duration to start its animation. Similarlyrow2col1should start at57%,row2col2should start at66%and so on. - If the lines need to slowly fade in, then make it start with
opacity: 0at41%and getopacity: 1at49%(forrow1col1and so on for the rest). On the other hand if you need them to appear instantaneously, reduce the percentage where it getsopacity: 1. In the snippet, I have made therow1col1reachopacity: 1at42%itself (which is like0.12s).
Notes:
- I have also modified the
stroke-dasharraysettings of the ear's components to avoid the delay that was originally there between completion of ear's animation and start of the line's animation. - I would also recommend you to get some SVG expert's help to check if the no. of parts can be minimized as it would reduce no. of keyframes required etc. Unfortunately, my SVG knowledge is limited and so I can't help much with it.
.firstpath {
stroke-dasharray: 150;
animation: firstanimate 12s linear forwards infinite;
}
@keyframes firstanimate {
0% {
stroke-dashoffset: 150;
}
41% {
stroke-dashoffset: 0;
}
}
.secondpath {
stroke-dasharray: 100;
animation: secondanimate 12s linear forwards infinite;
}
@keyframes secondanimate {
0% {
stroke-dashoffset: 100;
}
41% {
stroke-dashoffset: 0;
}
}
.thirdpath {
stroke-dasharray: 65;
animation: thirdanimate 12s linear forwards infinite;
}
@keyframes thirdanimate {
0% {
stroke-dashoffset: 65;
}
41% {
stroke-dashoffset: 0;
}
}
line {
opacity: 0;
}
.row1col1 {
animation: blink 12s linear forwards infinite;
}
@keyframes blink {
41% {
opacity: 0;
}
42%, 100% {
opacity: 1;
}
}
.row1col2 {
animation: blink2 12s linear forwards infinite;
}
@keyframes blink2 {
49% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
.row2col1 {
animation: blink3 12s linear forwards infinite;
}
@keyframes blink3 {
57% {
opacity: 0;
}
58%, 100% {
opacity: 1;
}
}
.row2col2 {
animation: blink4 12s linear forwards infinite;
}
@keyframes blink4 {
66% {
opacity: 0;
}
67%, 100% {
opacity: 1;
}
}
.row2col3 {
animation: blink5 12s linear forwards infinite;
}
@keyframes blink5 {
75% {
opacity: 0;
}
76%, 100% {
opacity: 1;
}
}
.row3col1 {
animation: blink6 12s linear forwards infinite;
}
@keyframes blink6 {
84% {
opacity: 0;
}
85%, 100% {
opacity: 1;
}
}
.row3col2 {
animation: blink7 12s linear forwards infinite;
}
@keyframes blink7 {
92% {
opacity: 0;
}
93%, 100% {
opacity: 1;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<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="
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
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="
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
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="
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
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 class="row1col2" 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 class="row2col3" 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 class="row2col2" 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 class="row2col1" 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 class="row3col1" 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 class="row3col2" 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>- Animate toggle height from 0 to auto or 100%
- How does the "position: sticky;" property work?
- Disabling android's chrome pull-down-to-refresh feature
- Placing national flags at start of sentence
- Clear-Site-Data "*" : Different behavior in both Firefox and Chrome
- How to programmatically Download a file from Google Drive, using Javascript and HTML? (NOT Google Drive API)
- Add CSS3 transition expand/collapse
- Remove content of p tag
- Email formatting basics (links in plain text emails)
- css file won't load when opening my website
- Should I use the .htm or .html file extension? Which one is correct?
- Can't figure out why element's height is not what I set it to
- How to submit form only once after multiple clicking on submit?
- Remove whitespace from SVG
- Why does CSS ::part override JavaScript element.style?
- Remove "content" CSS property "onclick" button for the entire website
- ReactJS - .JS vs .JSX
- Markdown no break (nobr)?
- Not able to trim displayed value in Dropdown
- Transition between routes in react-router-dom v6.3
- Show div even if empty
- some code i don't understand well in jquery
- Make Search Box closes if user clicks anywhere?
- How to handle required fields in display:"none"
- How to make a DIV visible and invisible with JavaScript?
- Blinking animation
- formvalidation.io external submit button
- webpage templates vs building from scratch
- How to add static text inside an input form
- Google Chrome Developer tools shows browser default font size as 18 pixels?