From 44c2c8f733406225a6065dc8d39b73342487233c Mon Sep 17 00:00:00 2001
From: Pavan Chilukuri <pavan.chilukuri@dhcs.ca.gov>
Date: Mon, 5 Oct 2020 11:42:14 -0700
Subject: [PATCH 1/2] Add zoom in zoom out animation

---
 snippets/zoomin-zoomout-animation.md | 46 ++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 snippets/zoomin-zoomout-animation.md

diff --git a/snippets/zoomin-zoomout-animation.md b/snippets/zoomin-zoomout-animation.md
new file mode 100644
index 000000000..06ccadb30
--- /dev/null
+++ b/snippets/zoomin-zoomout-animation.md
@@ -0,0 +1,46 @@
+---
+title: Zoom In Zoom Out Animation
+tags: animation,beginner
+---
+
+Performs a zoom in and zoom out animation on an element using CSS.
+
+- Apply `animation` property to the element you want animate.
+- Set `animation-duration` property to `1s`. The `animation-duration` property sets the amount of time that an animation would complete in one cycle. Its value should be in seconds or milli seconds.
+- Set `animation-timing-function` to `ease`. The `animation-timing-function` property sets the animation progress through the duration of each cycle.
+- Set `animation-iteration-count` to`infinite`. The `animation-iteration-count` property sets the number of times an animation should be playing before it stops.
+- Create a keyframe named `zoomInZoomOut` which is responsible for applying intermediate styles throughout the animation sequence. Describe what needs to be done at steps, like in our example at `0%`, at `50%`, and at `100%`. Use `scale` and apply it to `transform` property inside the `@keyframes` which will gives us a smooth and ease zoom in and zoom out animation.
+
+```html
+<div class="container">
+  <div class="box"></div>
+</div>
+```
+
+```css
+.container {
+  padding: 50px;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  animation: zoomInZoomOut;
+  animation-duration: 1s;
+  animation-timing-function: ease;
+  animation-iteration-count: infinite;
+}
+
+@keyframes zoomInZoomOut {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.5, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+```

From e98f7afe659014b8d5ef17aa415765a92eb4f8e3 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 2 Apr 2021 21:49:01 +0300
Subject: [PATCH 2/2] Update zoomin-zoomout-animation.md

---
 snippets/zoomin-zoomout-animation.md | 31 +++++++++-------------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/snippets/zoomin-zoomout-animation.md b/snippets/zoomin-zoomout-animation.md
index 06ccadb30..09ae96be2 100644
--- a/snippets/zoomin-zoomout-animation.md
+++ b/snippets/zoomin-zoomout-animation.md
@@ -1,38 +1,27 @@
 ---
-title: Zoom In Zoom Out Animation
+title: Zoom in zoom out animation
 tags: animation,beginner
 ---
 
-Performs a zoom in and zoom out animation on an element using CSS.
+Creates a zoom in zoom out animation.
 
-- Apply `animation` property to the element you want animate.
-- Set `animation-duration` property to `1s`. The `animation-duration` property sets the amount of time that an animation would complete in one cycle. Its value should be in seconds or milli seconds.
-- Set `animation-timing-function` to `ease`. The `animation-timing-function` property sets the animation progress through the duration of each cycle.
-- Set `animation-iteration-count` to`infinite`. The `animation-iteration-count` property sets the number of times an animation should be playing before it stops.
-- Create a keyframe named `zoomInZoomOut` which is responsible for applying intermediate styles throughout the animation sequence. Describe what needs to be done at steps, like in our example at `0%`, at `50%`, and at `100%`. Use `scale` and apply it to `transform` property inside the `@keyframes` which will gives us a smooth and ease zoom in and zoom out animation.
+- Use `@keyframes` to define a three-step animation: at the start (`0%`) and end (`100%`), the element is its original size (`scale(1 ,1)`) and halfway through (`50%`) it's scaled up to 1.5 times its original size (`scale(1.5, 1.5)`).
+- Use `width` and `height` to give the element a specific size and use `animation` to set the appropriate values for the element to make it animated.
 
 ```html
-<div class="container">
-  <div class="box"></div>
-</div>
+<div class="zoom-in-out-box"></div>
 ```
 
 ```css
-.container {
-  padding: 50px;
-}
-
-.box {
+.zoom-in-out-box {
+  margin: 24px;
   width: 50px;
   height: 50px;
-  background-color: green;
-  animation: zoomInZoomOut;
-  animation-duration: 1s;
-  animation-timing-function: ease;
-  animation-iteration-count: infinite;
+  background: #f50057;
+  animation: zoom-in-zoom-out 1s ease infinite;
 }
 
-@keyframes zoomInZoomOut {
+@keyframes zoom-in-zoom-out {
   0% {
     transform: scale(1, 1);
   }