From 2dfbc7c62e96c05c7503dedae4858dd5ec4ea762 Mon Sep 17 00:00:00 2001
From: Micky <contact@michaelrappaz.com>
Date: Mon, 5 Nov 2018 02:26:25 +1100
Subject: [PATCH] Added all sub-properties and syntax (#20995)

Added transition-delay, transition-duration, transition-property & transition-timing-function. Also added syntax and reworked the layout
---
 guide/english/css/transition/index.md | 75 ++++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 13 deletions(-)

diff --git a/guide/english/css/transition/index.md b/guide/english/css/transition/index.md
index bb1381f1d1..30ba203941 100644
--- a/guide/english/css/transition/index.md
+++ b/guide/english/css/transition/index.md
@@ -15,30 +15,79 @@ You can change multiples property values with transition property.
 ```css 
   transition: width 300ms, height 2s;
 ```
+## Sub-Property
 
-### Specify the Speed Curve of the Transition
+To create a CSS transition, we have different sub-properties for the transition property in CSS :
 
-You can specify a speed curve on an element in transition property.
+• `transition-delay`<br>
+• `transition-duration`<br>
+• `transition-property`<br>
+• `transition-timing-function`
 
-```css 
-  transition: height 2s linear;
+### Delay
+
+The `transition-delay` property defines the delay (in seconds) before the transition is played.
+
+```css
+/* 2 seconds delay */
+
+div {
+  transition-delay: 2s;
+}
 ```
 
-or the property `transition-timing-function`
+### Duration
 
-```css 
+The `transition-duration` property defines the duration (in seconds) of the transition.
+
+```css
+/* 2 seconds duration */
+
+div {
+  transition-duration: 2s;
+}
+```
+### Property
+
+The `transition-property` property defines the CSS property that will be affected in the transition.
+
+```css
+/* The transition will be on the width property */
+
+div {
+  transition-property: width;
+}
+```
+
+### Timing-function
+
+The `transition-timing-function` property defines the speed of the transition.
+
+```css
+/* The transition speed */
+
+div {
   transition-timing-function: linear;
+}
 ```
+#### Different values of `transition-timing-function`
 
-### Different values of `transition-timing-function`
+• `ease` - specifies a transition effect with a slow start, then fast, then end slowly (this is default)<br>
+• `linear` - specifies a transition effect with the same speed from start to end<br>
+• `ease-in` - specifies a transition effect with a slow start<br>
+• `ease-out` - specifies a transition effect with a slow end<br>
+• `ease-in-out` - specifies a transition effect with a slow start and end<br>
+• `cubic-bezier(n,n,n,n)` - lets you define your own values in a cubic-bezier function
 
-`ease` - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
-`linear` - specifies a transition effect with the same speed from start to end
-`ease-in` - specifies a transition effect with a slow start
-`ease-out` - specifies a transition effect with a slow end
-`ease-in-out` - specifies a transition effect with a slow start and end
-`cubic-bezier(n,n,n,n)` - lets you define your own values in a cubic-bezier function
+## Syntax
 
+```css
+transition: property name / duration / timing function / delay ;
+```
+#### Example
+```css
+transition: width 2s linear 2s;
+```
 
 #### More Information:
 <!-- Please add any articles you think might be helpful to read before writing the article -->