rspec/rules/S4655/css/rule.adoc

== Why is this an issue?

``++!important++`` within keyframes declarations is completely ignored in some browsers and therefore it should not be used to be consistent among all browsers.


=== Noncompliant code example

[source,css]
----
@keyframes kf {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* Noncompliant; ignored */
  to   { margin-top: 100px; }
}
----


=== Compliant solution

[source,css]
----
@keyframes kf {
  from { margin-top: 50px; }
  50%  { margin-top: 150px; }
  to   { margin-top: 100px; }
}
----


== Resources

* https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#!important_in_a_keyframe[Mozilla Web Technology for Developers] - ``++!important++`` in a keyframe

ifdef::env-github,rspecator-view[]

'''
== Implementation Specification
(visible only on this page)

=== Message

Remove ``++!important++``.


=== Highlighting

!important


endif::env-github,rspecator-view[]