Нет анимации с ключевым кадром CSS (Mozilla Firefox) - PullRequest
Новая
       76

Нет анимации с ключевым кадром CSS (Mozilla Firefox)

0 голосов
/ 07 ноября 2019

Я пытаюсь выучить CSS. Я попытался сделать простую анимацию: изменить цвет фона диапазона, используя ключевые кадры, но ничего не изменилось / анимация

Мой код выглядит так:

HTML: 

    <span class="brand1">Test</span>

CSS: 

`body{
    margin: 0;
    padding: 0;}

.brand1{
     display: block;
    font-size: 2em;
    width: 10vw;
    -moz-animation: test, 2s, infinite;
    animation: test, 2s, infinite;

}
#header{
    width: 100%;
    background-color: teal;
}

@keyframes test{
    from {background-color: tomato; }
    to { background-color: violet; }
}

@-moz-keyframes test{
    from {background-color: tomato; }
    to { background-color: violet; }
}`

Я использую Mozilla, поэтому считаю, что не должно быть проблем с совместимостью. Так в чем же проблема в моем коде?

Ответы [ 2 ]

0 голосов
/ 07 ноября 2019

Анимация вашего .brand1 написана неправильно, вам нужно разделить продолжительность и анимацию.

Вот пример того, как вам нужно это сделать 

p {
   animation-duration: 25s;
   animation-name: slidein;
}

@keyframes slidein {
   from {
       margin-left: 100%;
       width: 300%;
   }
   75% {
       font-size: 300%;
       margin-left: 25%;
       width: 150%;
   }

   to {
       margin-left: 0%;
       width: 100%;
   }
}

Здесь ваш код изменен для этого способа 

.brand1 {
    display: block;
    font-size: 2em;
    width: 10vw;
    animation-duration: 1s;
    animation: test;
}


@keyframes test {
    from {color: tomato; }
    to { color: violet; }
}
0 голосов
/ 07 ноября 2019

1) Поскольку вы указали запятые в свойстве анимации, нам нужно разделить методы свойства, используя пробел , а не запятые.

2) Если вывы хотите изменить цвет текста, который вы используете color свойство, которое используется для изменения цвета шрифтов, а не свойство background-color , оно изменит цвет фона вашей веб-страницы.

Вот код, который я внес в него. Вы можете посмотреть. 

body{
    margin: 0;
    padding: 0;}

.brand1{
     display: block;
    font-size: 2em;
    width: 10vw;
    animation: test 1s infinite;

}


@keyframes test{
    from {color: tomato; }
  to { color: violet; }
}
 <span class="brand1">Test</span>
...