How to define @keyframes with particular selectors in CSS

Question

I have a widget and I am trying to put all my code inside the widget selector so it doesn't break exterior css(of the website where widget is placed). For this I also want to put my animation under the widget selector.

Placing a selector infront of the @keyframes breaks the code and animation doesn't work

This works:

animation: slide-up-fade-in ease 1s;
@keyframes slide-up-fade-in{
    0% {
        ...
    }
}

But if I place a selector in front of the @keyframes it stops working

animation: slide-up-fade-in ease 1s;
mybot @keyframes slide-up-fade-in{
    0% {...}

Why you don't rename your keyframe to `-slide-up-fade-in`, because I think it is not possible to use it with a selector. And with this option you don't have the problem with accidentally multi-naming. — Spirit, Apr 30 '19 at 08:55
I am already doing this. Just figuring out if it is possible to avoid the conflict 100% — sc0rp1on, Apr 30 '19 at 08:57
I haven't found any option for namespacing keyframes. There is a question for something similar with less https://stackoverflow.com/questions/15974128/how-to-set-keyframes-name-in-less . — Spirit, Apr 30 '19 at 09:04

score 0 · Answer 1 · answered Apr 30 '19 at 08:55

Maybe it will help:

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

With this CSS everything should work correctly. :)

score 0 · Answer 2 · answered Apr 30 '19 at 08:57

@keyframes heartBeat {
    from {
        transform: scale(0.7);
      }
      0% {
        transform: scale(0.55);
      }
      25% {
        transform: scale(0.7);
      }
      50% {
        transform: scale(0.6);
      }
      60% {
        transform: scale(0.7);
      }
      100% {
        transform: scale(0.55);
      }
    to {
        transform: scale(0.7);
    }
}
.animation-heartBeat {
    animation: .7s infinite heartBeat;
}

How to define @keyframes with particular selectors in CSS

2 Answers2