How did you come up with that? Really interesting :)
Interesting side effect of Element.animate() :)
didnt i get the excercise correctly?
in Firefox actually !important wins the battle.
in Edge u dont even need that (because animate is not supported there yet)
In fact, there is the way to do this trick in Firefox, too (as well as in IE11/Edge). As far as I understand, Firefox's behavior is correct, and other browsers violate the CSS Cascade 3/4 spec.
According to the spec, the order of priority of styles based on origin and importance is the following:
Styles set via Animation API should count as Animation declarations and therefore shouldn't override important author declarations (like CSS keyframe animations and unlike transitions). But currently only Firefox treats it this way.
P.S. There is an article (in Russian) that explains the topic: http://css-live.ru/articles-css/up-the-cascade-css-superhero-challenge.html
Challenge accepted 🔥🔥🔥
@retyui what about the hard level? :) https://codepen.io/SelenIT/pen/jLbZPz
This is pure evil!
Not so hard, you left some "exploits" . One of them:
Add the following property to the #locked element in your devtools:
Given your browser supports CSS filters.
The borg has came
@AttilaVM what about the hard level then?
Nice, you can beat it with background-image: linear-gradient(red, red);
background-image: linear-gradient(red, red);
background-image of a solid color wins
@AttilaVM nice, but that's not technically changing the original property or the background color :)
@retyui good catch! Apparently just Chrome for now, and IE+WebKit don't support Web Animations yet.
@davidhartley, smart, but that's technically not a color, but a generated background image :)
(I also added a filter on the image so that it would look normal ^^)
Works in Chrome too efficiently. Well played.
Need to know how to enable it? Go here.