Анимация следа мародеров - PullRequest
Новая
       9

Анимация следа мародеров

0 голосов
/ 31 августа 2018

Я экспериментировал с анимацией следа, которая имитирует эффект на карте мародеров Гарри Поттера. Анимация затухания, при которой чернила медленно просачиваются в бумажное волокно. Для начала у меня есть три изображения следа, в разных состояниях распада. Они анимированы, чтобы следовать друг за другом в разделе. Это работает как статический след. Каждый раздел можно легко повторить на экране. Но моя проблема начинается, когда я пытаюсь заставить их появляться друг за другом и запускать анимацию в точке видимости. Я пробовал разные подходы, но не могу понять это. Кто-нибудь есть совет, чтобы дать? Изображения:

Полная площадь

Первое исчезновение

Второе затухание

Код CSS здесь: 

section {
position: relative;
}

section img {
position: absolute;
transform: rotate(90deg);
}

.footcontainer1{
position: absolute;
left: 12px;
visibility: hidden;
animation: .3s infinite delayedShow ;
animation-fill-mode: forwards;
}
.footcontainer2{
position: absolute;
left: 48px;
visibility: hidden;
animation: 1s infinite delayedShow ;
animation-fill-mode: forwards;
}
.footcontainer3{
position: absolute;
left: 48px;
visibility: hidden;
animation: 2s infinite delayedShow ;
animation-fill-mode: forwards;
}
.footcontainer4{
position: absolute;
left: 48px;
visibility: hidden;
animation: 3s infinite delayedShow ;
animation-fill-mode: forwards;
}

@keyframes delayedShow {
25% {
visibility: hidden;
}
26% {
visibility: visible;
}
}
.footcontainer3{
position: absolute;
left: 96px;
transform: rotate(12deg);
}
.footcontainer4{
position: absolute;
left: 148px;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
transform: rotate(36deg);
}

.top {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 3.5s;
animation-direction: normal;
animation-fill-mode:forwards;
}
.middle {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 4s;
animation-direction: normal;
animation-fill-mode:forwards;
}
.bottom{
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 7s;
animation-direction: normal;
animation-fill-mode:forwards;
}

@keyframes fade {
0% {
    opacity: 1;
}
/*25% {
    opacity: 1;
}
75% {
    opacity: 0;
}*/
100% {
    opacity: 0;
}
}

HTML здесь: 

<section class="footcontainer1">
<img class="top" src="footprint1.png" alt="Image 1"/>
<img class="middle" src="footprint2.png" alt="Image 2"/>
<img class="bottom" src="footprint3.png" alt="Image 3"/>  
</section>

<section class="footcontainer2">
<img class="top" src="footprint1.png" alt="Image 1"/>
<img class="middle" src="footprint2.png" alt="Image 2"/>
<img class="bottom" src="footprint3.png" alt="Image 3"/>  
</section>

<section class="footcontainer3">
<img class="top" src="footprint1.png" alt="Image 1"/>
<img class="middle" src="footprint2.png" alt="Image 2"/>
<img class="bottom" src="footprint3.png" alt="Image 3"/>  
</section>

<section class="footcontainer4">
<img class="top" src="footprint1.png" alt="Image 1"/>
<img class="middle" src="footprint2.png" alt="Image 2"/>
<img class="bottom" src="footprint3.png" alt="Image 3"/>  
</section>

Для этого примера я установил n бесконечного цикла для анимации, просто чтобы вы могли видеть, как происходит переход.

...