From baca9a29a739600322381fb1b508f0979615ecc6 Mon Sep 17 00:00:00 2001
From: maria-logh <maria.s@logh.uk>
Date: Sat, 3 Dec 2016 16:41:13 +0000
Subject: [PATCH 1/2] CSS Transitions Tutorial

---
 html/lesson5/style.css   |  7 +++++
 html/lesson5/tutorial.md | 55 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/html/lesson5/style.css b/html/lesson5/style.css
index 0b2cf4fd..ed2c5f05 100644
--- a/html/lesson5/style.css
+++ b/html/lesson5/style.css
@@ -108,3 +108,10 @@ a.btn {
   padding: 20px 30px;
   border-radius: 5px;
 }
+
+a.btn:hover {
+  background: black;
+  transition-property: background;
+  transition-duration: 4s;
+  transition-delay: 1s;
+}
diff --git a/html/lesson5/tutorial.md b/html/lesson5/tutorial.md
index 8f242b6e..fd475413 100644
--- a/html/lesson5/tutorial.md
+++ b/html/lesson5/tutorial.md
@@ -425,6 +425,61 @@ In our case, we only want to change the style of every odd row. Achieving that i
 
 > Try changing odd to even
 
+
+### Transitions
+
+Let's take some **property** in our code and change it, making it somehow different.  E.g. The `background` of the two links named **btn**, and  let's change it on hover.  This is a 'change'.  Now we can have this affect take place during a number of seconds, this is a **Transition**.  
+Go ahead and add the selector to the stylesheet.  
+
+```css
+a.btn:hover {
+
+        [your property: your value;]
+  
+}
+```
+
+Add the **property** which we are chaning and its new value:
+
+```css
+a.btn:hover {
+    background: black;
+}```
+
+Now create a **Transition** affect:
+
+```css
+a.btn:hover {
+    background: black;
+    transition-duration: 4s;
+}```
+
+Create another one:
+
+```css
+a.btn:hover {
+    background: black;
+    transition-duration: 4s;
+    transition-delay: 1s;
+}```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 ## But before we end our lesson
 
 ### RGB colors and opacity

From 27e306427b496ddf84675743762802db215d2368 Mon Sep 17 00:00:00 2001
From: maria-logh <maria.s@logh.uk>
Date: Sat, 3 Dec 2016 16:57:54 +0000
Subject: [PATCH 2/2] Irrelevant Change - Ignore (Practice)

---
 html/lesson5/tutorial.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html/lesson5/tutorial.md b/html/lesson5/tutorial.md
index fd475413..0a6d6bf3 100644
--- a/html/lesson5/tutorial.md
+++ b/html/lesson5/tutorial.md
@@ -450,7 +450,7 @@ Now create a **Transition** affect:
 
 ```css
 a.btn:hover {
-    background: black;
+    background: black; 
     transition-duration: 4s;
 }```