diff --git a/gtk/gtkcssrgbavalue.c b/gtk/gtkcssrgbavalue.c
index 0b66f8a113..7005347e0e 100644
--- a/gtk/gtkcssrgbavalue.c
+++ b/gtk/gtkcssrgbavalue.c
@@ -74,9 +74,15 @@ gtk_css_value_rgba_transition (GtkCssValue *start,
     }
   else
     {
-      result.red = transition (start->rgba.red, end->rgba.red, progress);
-      result.green = transition (start->rgba.green, end->rgba.green, progress);
-      result.blue = transition (start->rgba.blue, end->rgba.blue, progress);
+      result.red = transition (start->rgba.red * start->rgba.alpha,
+                               end->rgba.red * end->rgba.alpha,
+                               progress) / result.alpha;
+      result.green = transition (start->rgba.green * start->rgba.alpha,
+                                 end->rgba.green * end->rgba.alpha,
+                                 progress) / result.alpha;
+      result.blue = transition (start->rgba.blue * start->rgba.alpha,
+                                end->rgba.blue * end->rgba.alpha,
+                                progress) / result.alpha;
     }
 
   return _gtk_css_rgba_value_new_from_rgba (&result);
diff --git a/testsuite/reftests/Makefile.am b/testsuite/reftests/Makefile.am
index 61cc0a233a..3887acc95e 100644
--- a/testsuite/reftests/Makefile.am
+++ b/testsuite/reftests/Makefile.am
@@ -185,6 +185,9 @@ testdata = \
 	cellrenderer-pixbuf-stock-rtl.css \
 	cellrenderer-pixbuf-stock-rtl.ui \
 	cellrenderer-pixbuf-stock-rtl.ref.ui \
+	color-transition.css \
+	color-transition.ref.ui \
+	color-transition.ui \
 	css-currentcolor-alpha.css \
 	css-currentcolor-alpha.ui \
 	css-currentcolor-alpha.ref.ui \
diff --git a/testsuite/reftests/color-transition.css b/testsuite/reftests/color-transition.css
new file mode 100644
index 0000000000..ac964b00b6
--- /dev/null
+++ b/testsuite/reftests/color-transition.css
@@ -0,0 +1,18 @@
+@import "reset-to-defaults.css";
+
+@keyframes foo {
+  100% { background-color: blue; }
+}
+
+GtkWindow {
+  background-color: #7F0080;
+}
+
+GtkBox {
+  background-color: red;
+}
+
+GtkBox GtkBox {
+  background-color: transparent;
+  animation: foo 100s steps(2);
+}
diff --git a/testsuite/reftests/color-transition.ref.ui b/testsuite/reftests/color-transition.ref.ui
new file mode 100644
index 0000000000..fa28350906
--- /dev/null
+++ b/testsuite/reftests/color-transition.ref.ui
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.0 -->
+  <object class="GtkWindow" id="window1">
+    <property name="can_focus">False</property>
+    <property name="type">popup</property>
+  </object>
+</interface>
diff --git a/testsuite/reftests/color-transition.ui b/testsuite/reftests/color-transition.ui
new file mode 100644
index 0000000000..47e01cb600
--- /dev/null
+++ b/testsuite/reftests/color-transition.ui
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.0 -->
+  <object class="GtkWindow" id="window1">
+    <property name="can_focus">False</property>
+    <property name="type">popup</property>
+    <child>
+      <object class="GtkBox" id="box1">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <child>
+          <object class="GtkBox" id="box2">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <child>
+              <placeholder/>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>