.network-container {
  padding: 5px;
}
.svg-network {
  cursor: move;
}
.node {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer;
}
.highlighting .nodecontainer {
  opacity: 0.2;
}
.highlighting .nodecontainer.highlighted {
  opacity: 1;
}
.node-label {
  font-family: sans-serif;

}
.subject {
  stroke-width: 4px;
  stroke-dasharray: 1,1;
  cursor: auto;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
  opacity: 0.7;
  stroke-linejoin: miter;
}
.highlighting .link {
  opacity: 0.2;
}
.highlighting .link.highlighted {
  opacity: 1;
}
.node-icon {
  pointer-events: none;
  font-family: 'Glyphicons Halflings';
  fill: none;
}

.subjectlink {
  stroke: #666;
  stroke-width: 1.5px;
  opacity: 0.8;
}
.tooltip {
  position: absolute;
  text-align: center;
  max-width: 300px;
  padding: 8px;
  font: 12px sans-serif;
  background: #fff;
  border: solid 1px #aaa;
  pointer-events: none;
}

.network-container {
  padding: 5px;
}
.svg-network {
  cursor: move;
}
.node {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer;
}
.nodecontainer {
  transition: opacity 0.3s ease-in-out;
}
.highlighting .nodecontainer {
  opacity: 0.2;
}
.highlighting .nodecontainer.highlighted {
  opacity: 1;
}
.node-label {
  font-family: sans-serif;

}
.subject {
  stroke-width: 4px;
  stroke-dasharray: 1,1;
  cursor: auto;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
  opacity: 0.7;
  stroke-linejoin: miter;
  transition: opacity 0.5s ease-in-out;
}
.highlighting .link {
  opacity: 0.2;
}
.highlighting .link.highlighted {
  opacity: 1;
}
.node-icon {
  pointer-events: none;
  font-family: 'Glyphicons Halflings';
  fill: none;
}

.subjectlink {
  stroke: #666;
  stroke-width: 1.5px;
  opacity: 0.8;
}
.tooltip {
  position: absolute;
  text-align: center;
  max-width: 300px;
  padding: 8px;
  font: 12px sans-serif;
  background: #fff;
  border: solid 1px #aaa;
  pointer-events: none;
}

Add transition for opacity changes on nodes
Add transition for opacity changes on nodes 