почему затухание CSS не работает - PullRequest
Новая
       17

почему затухание CSS не работает

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

Я хочу добавить одно слово, а затем добавить другое, но проблема в том, что оно, похоже, возвращается

Я пытался установить непрозрачность от одного до нуля, но она не работает 

    animation: fadeout 5s;
}
@keyframes fadeout
{

from{opacity: 1;}
to {opacity: 0;

}

}
.fade-in{
    animation: fadein 5s;
}
@keyframes fadein
{

from{opacity: 0;}
to {opacity: 1;}

}
html{background-color: white}
<!DOCTYPE html>
<html>
<head>
    <title>welcom</title>
    <link rel="stylesheet" type="text/css" href="welc.css" >
</head>
<body>
    <center>
<font class='fade-out' size="30"> hello </font>

<font class='fade-in' size="30"> do you like pandas?</font>
    </center>
</body>
</html>

Я хочу, чтобы (привет) полностью исчез, а для (вам нравятся панды) -

Ответы [ 2 ]

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

Вы должны добавить свойство непрозрачности со значением 0 в классе исчезновения, так как это конечный результат. 

.fade-out{ 
 animation: fadeout 5s;
 opacity: 0;
}
@keyframes fadeout
{

from{opacity: 1;}
to {opacity: 0;}

}
.fade-in{
  animation: fadein 5s;
}
@keyframes fadein
{

from{opacity: 0;}
to {opacity: 1;}

}
html{background-color: white}
<!DOCTYPE html>
    <html>
    <head>
        <title>welcom</title>
        <link rel="stylesheet" type="text/css" href="welc.css" >
    </head>
    <body>
        <center>
    <font class='fade-out' size="30"> hello </font>

    <font class='fade-in' size="30"> do you like pandas?</font>
        </center>
    </body>
    </html>
0 голосов
/ 30 апреля 2019

Когда вы создаете анимацию, иногда вам нужно указать режим заливки.Это говорит вашему анимированному элементу, какой стиль сохранить после окончания анимации.

Вы можете указать режим заливки, используя animation-fill-mode property.

animation-fill-mode property можно установить на:

  • свойство animation-fill-mode: вперед;
  • свойство animation-fill-mode: назад;
  • animation-fill-mode свойство: both;
  • animation-fill-mode свойство: none;

Если установить значение forward, элемент сохранит стиль, указанный в 100%ваша анимация.

При установке в обратном направлении элемент будет сохранять стиль, указанный вами в 0%.

Поэтому вы можете добавить 

.fade-out{
    animation: fadeout 5s;
    animation-fill-mode : forwards;
}

, и он долженРабота.

Надеюсь, это поможет.

...