From e4e115635454778bca2a537b57a9a9dcff02bbc1 Mon Sep 17 00:00:00 2001
From: dillionmegida <dillionmegida@gmail.com>
Date: Fri, 2 Oct 2020 18:57:56 +0100
Subject: [PATCH 1/2] docs(animations): add React and Angular example for
 keyframe animations

---
 src/pages/utilities/animations.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/utilities/animations.md b/src/pages/utilities/animations.md
index 43752359e4e..af33843b11d 100755
--- a/src/pages/utilities/animations.md
+++ b/src/pages/utilities/animations.md
@@ -200,6 +200,8 @@ this.animationCtrl.create()
 </docs-tab>
 </docs-tabs>
 
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-angular-animation-keyframes) and in React [here](https://stackblitz.com/edit/ionic-react-animation-keyframes).
+
 In the example above, the `.square` element will transition from a red background color, to a background color defined by the `--background` variable, and then transition on to a green background color.
 
 Each keyframe object contains an `offset` property. `offset` is a value between 0 and 1 that defines the keyframe step. Offset values must go in ascending order and cannot repeat.

From a2b13315421bed6a9eda346ea96f61b029d4ce38 Mon Sep 17 00:00:00 2001
From: dillionmegida <dillionmegida@gmail.com>
Date: Mon, 5 Oct 2020 15:03:38 +0100
Subject: [PATCH 2/2] improvement(docs/keyframe-animations): change animation
 style

People with color defects may not be able to see the animation properly, so I changed it to something more perceivable
---
 src/pages/utilities/animations.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/utilities/animations.md b/src/pages/utilities/animations.md
index af33843b11d..b390926682e 100755
--- a/src/pages/utilities/animations.md
+++ b/src/pages/utilities/animations.md
@@ -162,9 +162,9 @@ createAnimation()
   .duration(3000)
   .iterations(Infinity)
   .keyframes([
-    { offset: 0, background: 'red' },
-    { offset: 0.72, background: 'var(--background)' },
-    { offset: 1, background: 'green' }
+    { offset: 0, transform: "rotate(0deg) scale(1)" },
+    { offset: 0.72, transform: "rotate(180deg) scale(2)" },
+    { offset: 1, transform: "rotate(360deg) scale(1)" }
   ]);
 ```
 </docs-tab>
@@ -176,9 +176,9 @@ this.animationCtrl.create()
   .duration(3000)
   .iterations(Infinity)
   .keyframes([
-    { offset: 0, background: 'red' },
-    { offset: 0.72, background: 'var(--background)' },
-    { offset: 1, background: 'green' }
+    { offset: 0, transform: "rotate(0deg) scale(1)" },
+    { offset: 0.72, transform: "rotate(180deg) scale(2)" },
+    { offset: 1, transform: "rotate(360deg) scale(1)" }
   ]);
 ```
 </docs-tab>
@@ -189,9 +189,9 @@ this.animationCtrl.create()
   duration={3000}
   iterations={Infinity}
   keyframes={[
-    { offset: 0, background: 'red' },
-    { offset: 0.72, background: 'var(--background)' },
-    { offset: 1, background: 'green' }
+    { offset: 0, transform: "rotate(0deg) scale(1)" },
+    { offset: 0.72, transform: "rotate(180deg) scale(2)" },
+    { offset: 1, transform: "rotate(360deg) scale(1)" }
   ]}
 >
 ...