diff --git a/src/styles/global.css b/src/styles/global.css
index 31749a64..80640b96 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  --style-transition: 0.3s;
 }
 
 body {
@@ -11,6 +12,7 @@ body {
 
 .container {
   overflow-x: hidden;
+  transition: background-color 0.2s;
 }
 
 .header {
@@ -221,14 +223,21 @@ body {
 
 /* COLORS */
 
-.container {
+.container,
+.source textarea {
   background-color: #ffffff;
+  transition: background-color var(--style-transition);
+}
+
+.source textarea {
+  transition:all var(--style-transition);
 }
 
 .header,
 .nav-item {
   fill: #343a40;
   color: #343a40;
+  transition: color, fill var(--style-transition);
 }
 
 .nav-item:hover {
@@ -250,6 +259,7 @@ body {
 .gutter.gutter-horizontal,
 .header {
   border-color: #cccccc;
+  transition: border-color var(--style-transition);
 }
 
 .nav-selector-menu {
@@ -275,11 +285,11 @@ body {
 /* DARK MODE */
 
 body[data-style=dark] .container,
-body[data-style=dark] textarea {
+body[data-style=dark] .source textarea {
   background-color: #222222;
 }
 
-body[data-style=dark] textarea {
+body[data-style=dark] .source textarea {
   color: #ffffff;
 }
 
diff --git a/src/styles/nodes.css b/src/styles/nodes.css
index 8e6c4fa0..9bc06594 100644
--- a/src/styles/nodes.css
+++ b/src/styles/nodes.css
@@ -118,6 +118,7 @@ button.remove::before {
 
 .node-header > * {
   border-color: #bcbfc3;
+  transition:all var(--style-transition);
 }
 
 .node-header > label {
@@ -143,14 +144,17 @@ button.remove {
 
 .list-node > .node-body {
   border-color: #72a543;
+  transition: border-color var(--style-transition);
 }
 
 .map-node > .node-body {
   border-color: #066fb4;
+  transition: border-color var(--style-transition);
 }
 
 .object-node > .node-body {
   border-color: #b9b9b9;
+  transition: border-color var(--style-transition);
 }
 
 /* DARK MODE */