How to define #keyframes with particular selectors in CSS - 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% {...}

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