Skip to content

Commit 7673fa1

Browse files
committed
Add: transition filters notes
1 parent e4de40c commit 7673fa1

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

css_misc_notes.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,49 @@
1414

1515
<!-- tocstop -->
1616

17+
## Transition filters
18+
19+
You can transition css filters, but the filters applied must match OR only one "end" has the filters. For example:
20+
21+
This works:
22+
23+
```css
24+
.profile-pic {
25+
transition: filter .3s ease-in-out;
26+
}
27+
28+
.profile-pic:hover {
29+
filter: sepia(10%) brightness(1.1);
30+
}
31+
```
32+
33+
And this works:
34+
35+
```css
36+
.profile-pic {
37+
filter: sepia(0%) brightness(1.02);
38+
transition: filter .3s ease-in-out;
39+
}
40+
41+
.profile-pic:hover {
42+
filter: sepia(10%) brightness(1.1);
43+
}
44+
```
45+
46+
47+
But this does NOT work:
48+
49+
```css
50+
.profile-pic {
51+
filter: brightness(1.05);
52+
transition: filter .3s ease-in-out;
53+
}
54+
55+
.profile-pic:hover {
56+
filter: sepia(10%) brightness(1.1);
57+
}
58+
```
59+
1760
## button reset
1861

1962
```css

0 commit comments

Comments
 (0)