Skip to content

Commit

Permalink
Finish heartbeat effect cleaning for "animated edges"
Browse files Browse the repository at this point in the history
  • Loading branch information
Laurent Hausermann committed Dec 31, 2014
1 parent 1e7769f commit 6cedd5d
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 111 deletions.
50 changes: 25 additions & 25 deletions themes/default/the-graph.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,42 +206,42 @@ path {
/* marching ants for animated edges */

@-webkit-keyframes heartbeats {
0% { stroke-width: (var-edge-width * 4); }
10% { stroke-width: (var-edge-width * 6); }
30% { stroke-width: (var-edge-width * 4); }
40% { stroke-width: (var-edge-width * 6); }
60% { stroke-width: (var-edge-width * 4); }
0% { stroke-width: (var-edge-width * 2); }
10% { stroke-width: (var-edge-width * 4); }
30% { stroke-width: (var-edge-width * 2); }
40% { stroke-width: (var-edge-width * 4); }
60% { stroke-width: (var-edge-width * 2); }
}
@-moz-keyframes heartbeats {
0% { stroke-width: (var-edge-width * 4); }
10% { stroke-width: (var-edge-width * 6); }
30% { stroke-width: (var-edge-width * 4); }
40% { stroke-width: (var-edge-width * 6); }
60% { stroke-width: (var-edge-width * 4); }
0% { stroke-width: (var-edge-width * 2); }
10% { stroke-width: (var-edge-width * 4); }
30% { stroke-width: (var-edge-width * 2); }
40% { stroke-width: (var-edge-width * 4); }
60% { stroke-width: (var-edge-width * 2); }
}
@-o-keyframes heartbeats {
0% { stroke-width: (var-edge-width * 4); }
10% { stroke-width: (var-edge-width * 6); }
30% { stroke-width: (var-edge-width * 4); }
40% { stroke-width: (var-edge-width * 6); }
60% { stroke-width: (var-edge-width * 4); }
0% { stroke-width: (var-edge-width * 2); }
10% { stroke-width: (var-edge-width * 4); }
30% { stroke-width: (var-edge-width * 2); }
40% { stroke-width: (var-edge-width * 4); }
60% { stroke-width: (var-edge-width * 2); }
}
@keyframes heartbeats {
0% { stroke-width: (var-edge-width * 4); }
10% { stroke-width: (var-edge-width * 6); }
30% { stroke-width: (var-edge-width * 4); }
40% { stroke-width: (var-edge-width * 6); }
60% { stroke-width: (var-edge-width * 4); }
0% { stroke-width: (var-edge-width * 2); }
10% { stroke-width: (var-edge-width * 4); }
30% { stroke-width: (var-edge-width * 2); }
40% { stroke-width: (var-edge-width * 4); }
60% { stroke-width: (var-edge-width * 2); }
}
.edge.animated .edge-bg {
stroke-linecap: round;
stroke-width: (var-edge-width * 4);
stroke-width: (var-edge-width * 2);
stroke: var-selection-box-border;

-webkit-animation: heartbeats 1s linear infinite;
-moz-animation: heartbeats 1s linear infinite;
-o-animation: heartbeats 1s linear infinite;
animation: heartbeats 1s linear infinite;
-webkit-animation: heartbeats 4s linear infinite;
-moz-animation: heartbeats 4s linear infinite;
-o-animation: heartbeats 4s linear infinite;
animation: heartbeats 4s linear infinite;
}


Expand Down
90 changes: 45 additions & 45 deletions themes/the-graph-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,75 +185,75 @@
}
@-webkit-keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
@-moz-keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
@-o-keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
.the-graph-dark .edge.animated .edge-bg {
stroke-linecap: round;
stroke-width: 12px;
stroke-width: 6px;
stroke: #e6e6e6;
-webkit-animation: heartbeats 1s linear infinite;
-moz-animation: heartbeats 1s linear infinite;
-o-animation: heartbeats 1s linear infinite;
animation: heartbeats 1s linear infinite;
-webkit-animation: heartbeats 4s linear infinite;
-moz-animation: heartbeats 4s linear infinite;
-o-animation: heartbeats 4s linear infinite;
animation: heartbeats 4s linear infinite;
}
.the-graph-dark text {
font-family: "SourceCodePro", "Source Code Pro", Helvetica, Arial, sans-serif;
Expand Down Expand Up @@ -752,106 +752,106 @@
}
@-moz-keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
@-webkit-keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
@-o-keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
@-ms-keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
@keyframes heartbeats {
0% {
stroke-width: 12px;
stroke-width: 6px;
}

10% {
stroke-width: 18px;
stroke-width: 12px;
}

30% {
stroke-width: 12px;
stroke-width: 6px;
}

40% {
stroke-width: 18px;
stroke-width: 12px;
}

60% {
stroke-width: 12px;
stroke-width: 6px;
}
}
Loading

0 comments on commit 6cedd5d

Please sign in to comment.