Несколько анимаций затухания с использованием ключевых кадров, обеспечивающих прозрачность после завершения - PullRequest
Новая
       33

Несколько анимаций затухания с использованием ключевых кадров, обеспечивающих прозрачность после завершения

1 голос
/ 06 января 2020

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

Chrome. Протестировано OK в Firefox и Edge

[Правка} Запуск приведенного ниже фрагмента кода не воссоздает проблему, но в CodePen вы можете увидеть ее

https://codepen.io/rachelreveley/pen/LYEOQPz

div {width: 300px; height: 300px;}
.one {
  background-color: black;
}
.two {
  background-color: yellow;
  margin: -100px 0 0 100px
}

body {
    animation: fade 1s ease forwards;
}
.two {
    animation: delayed-fade 1s ease forwards;
}

// animation: fade 2s ease forwards;
@keyframes fade {
    0%   {opacity: 0;}
    100% {opacity: 100%;}
  }

// animation: delayed-fade 4s ease forwards;
@keyframes delayed-fade {
    0%   {opacity: 0;}
    20%  {opacity: 0;}
    100% {opacity: 100%;}
  }
<div class="one"></div>
<div class="two"></div>

Overlapping boxes

...