Всего 8 картинок. Если первые две появляются, то остальные на экране вроде бы появляются, но пустые. В чем проблема не могу понять. Пробовал с другой картинкой gif вот этой
http://habrastorage.org/webt/ft/dk/i...ir3suajkvu.gif, всё работает нормально.
<div class="container">
<div class="image-stack">
<div class="karaspryg">
<img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
</div>
<div class="kar_L">
<img src="https://habrastorage.org/webt/s_/yk/eo/s_ykeof0f15-dy2gci5evfp-oeo.gif" alt="">
</div>
<div class="kar_1">
<img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
</div>
<div class="karasik">
<img src="https://habrastorage.org/webt/s_/yk/eo/s_ykeof0f15-dy2gci5evfp-oeo.gif" alt="">
</div>
<div class="kar_2">
<img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
</div>
<div class="kar_L2">
<img src="https://habrastorage.org/webt/s_/yk/eo/s_ykeof0f15-dy2gci5evfp-oeo.gif" alt="">
</div>
<div class="kar_3">
<img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
</div>
<div class="kar_L3">
<img src="https://habrastorage.org/webt/s_/yk/eo/s_ykeof0f15-dy2gci5evfp-oeo.gif" alt="">
</div>
CSS
* {
outline: 1px solid red; //Это красные полосы
}
.container {
padding: 10px 80px;
width: 100%;
margin: 0 auto;
max-width: 1064px;
}
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.kar_L {
float: left;
z-index: 3;
}
.karaspryg {
float: left;
z-index: 3;
}
.kar_1 {
float: left;
z-index: 3;
}
.karasik {
float: left;
z-index: 3;
}
.kar_2 {
float: left;
z-index: 3;
}
.kar_L2 {
float: left;
z-index: 3;
}
.kar_3 {
float: left;
z-index: 3;
}
.kar_L3 {
float: left;
z-index: 3;
}
.kar_4 {
float: left;
z-index: 3;
}
.karaspryg {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
top: 1em;
left: 15em;
animation: KarasprygAnimation 1s 2s forwards; forwards;
visibility: hidden;
}
@keyframes KarasprygAnimation {
to {
visibility: visible;
}
}
.kar_L {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
top: 1em;
left: -20em;
animation: KarLAnimation 1s 4s forwards;
visibility: hidden;
}
@keyframes KarLAnimation {
to {
visibility: visible;
}
}
.kar_1 {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
top: -3em;
margin-left: 30em;
animation: Kar1Animation 1s 6s forwards;
visibility: hidden;
}
@keyframes Kar1Animation {
to {
visibility: visible;
}
}
.karasik {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
top: -7em;
left: 42em;
animation: KarasikAnimation 1s 8s forwards;
visibility: hidden;
}
@keyframes KarasikAnimation {
to {
visibility: visible;
}
}
.kar_2 {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
top: -2em;
left: -20em;
animation: Kar2Animation 1s 10s forwards;
visibility: hidden;
}
@keyframes Kar2Animation {
to {
visibility: visible;
}
}
.kar_L2 {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
margin-top: -3em;
left: -22em;
animation: KarL2Animation 1s 12s forwards;
visibility: hidden;
}
@keyframes KarL2Animation {
to {
visibility: visible;
}
}
.kar_3 {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
top: -6em;
margin-left: 32em;
animation: Kar3Animation 1s 13s forwards;
visibility: hidden;
}
@keyframes Kar3Animation {
to {
visibility: visible;
}
}
.kar_L3 {
grid-row: 1;
grid-column: 1;
transform: scale(0.5);
position: relative;
top: -10em;
margin-left: 45em;
animation: KarL3Animation 1s 15s forwards;
visibility: hidden;
}
@keyframes KarL3Animation {
to {
visibility: visible;
}
}
Тестирование проводил тут
http://codepen.io/bsi_52/pen/ExrrqEP
Как тут вставлять код , чтобы появлялась кнопочка "
Посмотреть!"?
