Как определить @keyframes с определенными селекторами в CSS - PullRequest
Новая
       7

Как определить @keyframes с определенными селекторами в CSS

0 голосов
/ 30 апреля 2019

У меня есть виджет, и я пытаюсь поместить весь свой код в селектор виджета, чтобы он не нарушал внешний CSS (веб-сайта, где размещен виджет). Для этого я также хочу поместить свою анимацию под селектором виджетов.

Размещение селектора перед @keyframes нарушает код, и анимация не работает

Это работает: 

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

Но если я поставлю селектор перед @keyframes, он перестанет работать 

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

Ответы [ 2 ]

0 голосов
/ 30 апреля 2019 

@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;
}
0 голосов
/ 30 апреля 2019

Может быть, это поможет: 

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

С этим CSS все должно работать правильно.:)

...