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

@@ -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`
+
+### Delay
+
+The `transition-delay` property defines the delay (in seconds) before the transition is played.
 
 ```css
-  transition: height 2s linear;
+/* 2 seconds delay */
+
+div {
+  transition-delay: 2s;
+}
 ```
 
-or the property `transition-timing-function`
+### Duration
+
+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)
+## Syntax
-`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
 
+```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 -->