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: README.md
+65-5
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# CSS Transitions & Transforms
1
+
# CSS Animations using Transitions & Transforms
2
2
3
3
### CSS transitions can enrich user experiences by adding animations to elements by smoothly changing CSS values over a specified duration
4
4
@@ -13,7 +13,12 @@ button {
13
13
transition-timing-function: ease;
14
14
}
15
15
```
16
-
shorthand `transition: background 0.3s ease;`
16
+
Shorthand:
17
+
```
18
+
button {
19
+
transition: background 0.3s ease;
20
+
}
21
+
```
17
22
18
23
The `transition-timing-function` value allows the speed of the transition to change over time. There are 6 values for this property: `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out` and `cubic-bezier`. The `ease` value is the default value.
19
24
@@ -28,7 +33,12 @@ button {
28
33
}
29
34
```
30
35
31
-
shorthand `transition: background 0.3s ease 0.5;`
36
+
Shorthand:
37
+
```
38
+
button {
39
+
transition: background 0.3s ease 0.5;
40
+
}
41
+
```
32
42
33
43
You might think that the transition property goes on the pseudo-class like the `:hover` state, but you might want the transition triggered on other states like `:focus`, so you should only declare the transition on the normal state.
34
44
@@ -53,11 +63,61 @@ button {
53
63
}
54
64
```
55
65
56
-
shorthand `transition: all 0.5s ease;`
57
-
(both the background and the color would be transitioned)
66
+
Shorthand:
67
+
```
68
+
button {
69
+
transition: all 0.5s ease;`
70
+
}
71
+
```
72
+
Both the background and the color would be transitioned
58
73
59
74
By stating the `all` value you can target all the available properties so they all have the same duration and timing function on all the pseudo-class states (:hover, :focus, :active).
60
75
61
76
Some other CSS properties that can be transitioned include `width`, `opacity`, `position` and `font-size`. Click [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) for the complete list of properties that can be animated.
62
77
63
78
## Transform Examples:
79
+
80
+
`scale()` increases or decreases the size of an element
81
+
82
+
```
83
+
button:hover {
84
+
transform: scale(2);
85
+
}
86
+
```
87
+
The button will be twice the original size when you hover over it
88
+
89
+
You can pass in two values into `scale(x, y)`
90
+
```
91
+
button:hover {
92
+
transform: scale(2, 3);
93
+
}
94
+
```
95
+
The button will be twice its original width and triple its original height
96
+
97
+
CSS3 animations use `keyframes` to specify what styles the element will have at certain times
98
+
99
+
```
100
+
button:hover {
101
+
animation-name: hover-pulse;
102
+
animation-duration: 1s;
103
+
animation-timing-function: linear;
104
+
animation-iteration-count: infinite;
105
+
}
106
+
107
+
@keyframes hover-pulse {
108
+
25% {
109
+
transform: scale(1.1);
110
+
}
111
+
75% {
112
+
transform: scale(0.9);
113
+
}
114
+
}
115
+
```
116
+
117
+
Shorthand:
118
+
```
119
+
button:hover {
120
+
animation: hover-pulse 1s linear infinite;
121
+
}
122
+
```
123
+
This button will infinitely pulse increasing and decreasing in size when hovered on
0 commit comments