Add content to Using CSS Transitions stub (#28154)

Replacing the stub for Using CSS transition with actual content, describing the basic what and how of CSS transitions

guide/english/css/using-css-transitions/index.md

@@ -3,21 +3,47 @@ title: Using CSS Transitions
 ---
 ## Using CSS Transitions
 
-CSS Transitions are used to create smooth movement of the elements in a website. They require less code than CSS animations, and tend to be less complex.
+**CSS transitions** provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
 
-Transitions take an element from one CSS value to another. Here's an example:
+CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).
 
-```css
+#### Which CSS properties can be transitioned?
-.transition-me {
+
-  width: 150px;
+[CSS animated properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
-  height: 50px;
+
-  background: blue;
+#### Defining transitions
+
+CSS Transitions are controlled using the shorthand `transition` property.
+You can control the individual components of the transition with the following sub-properties:
+
+`transition-property`: Name of the property, which transition should be applied.
+
+`transition-duration`: Duration over which transitions should occur.
+
+`transition-timing-function`: Function to define how intermediate values for properties are computed.
+
+`transition-delay`: Defines how long to wait between the time a property is changed and the transition actually begins.
+
+```
+div {
+    transition: <property> <duration> <timing-function> <delay>;
+}
+```
+
+#### Example
+
+This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:
+
+```
+#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
 }
 
-.transition-me:hover {
+#delay:hover {
-  width: 100px;
+  font-size: 36px;
-  height: 150px;
-  background: red;
 }
 ```