Skip to content

Commit 35df921

Browse files
committed
Animation styles
1 parent a9ede40 commit 35df921

File tree

1 file changed

+53
-0
lines changed

1 file changed

+53
-0
lines changed
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
svg {
2+
position: absolute;
3+
top: 50%;
4+
left: 50%;
5+
width: 740px;
6+
height: 140px;
7+
transform: translate(-50%, -50%);
8+
}
9+
10+
.path {
11+
stroke-dashoffset: 0;
12+
stroke-dasharray: 100%;
13+
animation: dash 4.5s linear;
14+
}
15+
16+
.path:nth-child(10) {
17+
animation-delay: -2s;
18+
}
19+
.path:nth-child(9) {
20+
animation-delay: -1.75s;
21+
}
22+
.path:nth-child(8) {
23+
animation-delay: -1.5s;
24+
}
25+
.path:nth-child(7) {
26+
animation-delay: -1.5s;
27+
}
28+
.path:nth-child(6) {
29+
animation-delay: -1.25s;
30+
}
31+
.path:nth-child(5) {
32+
animation-delay: -1s;
33+
}
34+
.path:nth-child(4) {
35+
animation-delay: -0.75s;
36+
}
37+
.path:nth-child(3) {
38+
animation-delay: -0.5s;
39+
}
40+
.path:nth-child(2) {
41+
animation-delay: -0.25s;
42+
}
43+
44+
@keyframes dash {
45+
0%,
46+
50% {
47+
stroke-dashoffset: 100%;
48+
}
49+
to {
50+
stroke-dashoffset: 0;
51+
}
52+
}
53+

0 commit comments

Comments
 (0)