File tree Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Original file line number Diff line number Diff line change 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
You can’t perform that action at this time.
0 commit comments