如何在CSS中使用特定选择器定义@keyframes

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% {...}

Answer 1

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. :)

Answer 2

 @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; }