You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/CSS/css-transitions.md
+11-10Lines changed: 11 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,13 @@
1
1
# CSS Transitions
2
2
3
3
## Introduction
4
+
4
5
CSS transitions provide a way to control the speed of animation changes to CSS properties. This can enhance the user experience by making the changes appear smooth and visually appealing.
5
6
6
7
## Basic Concepts
7
8
8
9
### What is a Transition?
10
+
9
11
A transition is a way to animate a property change over a given duration.
10
12
11
13
```css
@@ -14,6 +16,7 @@ A transition is a way to animate a property change over a given duration.
14
16
}
15
17
```
16
18
## Transition Properties
19
+
17
20
### transition-property
18
21
19
22
Specifies the name of the CSS property the transition effect is for.
@@ -60,6 +63,7 @@ Example: 0s, 1s, etc.
60
63
61
64
62
65
## Shorthand Property
66
+
63
67
You can combine all the individual transition properties into one shorthand property.
64
68
65
69
```css
@@ -68,7 +72,8 @@ You can combine all the individual transition properties into one shorthand prop
68
72
}
69
73
```
70
74
71
-
# Basic Transition
75
+
## Basic Transition
76
+
72
77
```html
73
78
<!DOCTYPE html>
74
79
<htmllang="en">
@@ -93,7 +98,7 @@ You can combine all the individual transition properties into one shorthand prop
93
98
</html>
94
99
```
95
100
96
-
# Transition Multiple Properties
101
+
##Transition Multiple Properties
97
102
98
103
```html
99
104
<!DOCTYPE html>
@@ -122,7 +127,8 @@ You can combine all the individual transition properties into one shorthand prop
122
127
</html>
123
128
```
124
129
125
-
# Delayed Transition
130
+
## Delayed Transition
131
+
126
132
```html
127
133
<!DOCTYPE html>
128
134
<htmllang="en">
@@ -147,10 +153,5 @@ You can combine all the individual transition properties into one shorthand prop
147
153
</html>
148
154
```
149
155
150
-
# Conclusion
151
-
CSS transitions provide a simple way to create smooth animations and improve the user experience. By using the various transition properties, you can control the timing, speed, and behavior of your animations to create visually appealing effects.
152
-
153
-
```bash
154
-
155
-
This guide covers the essential properties, concepts, and examples to help users understand and apply CSS transitions in their projects.
156
-
```
156
+
## Conclusion
157
+
CSS transitions provide a simple way to create smooth animations and improve the user experience. Using the various transition properties, you can control your animations' timing, speed, and behaviour to create visually appealing effects.
0 commit comments