Вот так
⇓ религия не позволила сделать?
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div class="navigation" style="position: relative;">
<ul class="nav nav-pills">
<li class="dropdown" style=" margin-right:85px; margin-left: 10%;"><a href="menu.html">
<div class="colorist"> Menu </div></a></li>
<li class="dropdown" style=" margin-right:85px;"><a href="gallery.html">
<div class="colorist"> Gallery </div></a></li>
<li class="dropdown"><a href="#footer">
<div class="colorist"> Contact</div></a></li>
</ul>
</div>
<div class="firstSlide">
<div class="container" style=" ;">
<ul class="body_slides">
<li><img class="pic" src="https://dummyimage.com/200x200/6278ad/fff.png" width="95%"/></li>
<li><img class="pic" src="https://dummyimage.com/200x200/ab6196/fff.png" width="95%"/></li>
<li><img class="pic" src="https://dummyimage.com/200x200/61ab8d/fff.png" width="95%"/></li>
</ul>
</div>
</div> |
|
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| .navigation > ul{
width: 100%;
opacity: 0.6;
display: inline-block;
}
.navigation > li{
padding-right: 15%;
}
.pic{
margin-left: 2%;
-webkit-animation:move 8s ease-in-out forwards;
-o-animation:move 8s ease-in-out forwards;
-moz-animation:move 8s ease-in-out forwards;
animation: move 8s ease-in-out forwards;
-webkit-animation-iteration-count:infinite;
animation-iteration-count: infinite;
-webkit-animation-name:New;
animation-name: New;
}
@keyframes New {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1.5);
}
}
.body_slides{
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#000;}
.body_slides,
.body_slides:after{
position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;}
.body_slides:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;}
.body_slides li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-size:cover;
background-repeat:none;
opacity:0;
-webkit-animation: anim_slides 18s linear infinite 0s;
-moz-animation: anim_slides 18s linear infinite 0s;
-o-animation: anim_slides 18s linear infinite 0s;
-ms-animation: anim_slides 18s linear infinite 0s;
animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1){
background-image: url(images/1.jpg)
}
.body_slides li:nth-child(2){
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(images/2.jpg)
}
.body_slides li:nth-child(3){
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(images/3.jpg)
}
@-webkit-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
} |
|
, Вам охотнее помогать будут, если Вы научитесь оформлять темы по правилам. Ваш код для решения я использовать не буду, скажу лишь, что проблемы в опциях анимации, неправильно рассчитанном времени и структуре кадров. Если я правильно вообще Вас понял. Наверное Вам нужно было, что-то вроде этого? =>
Песочница
| HTML5 |
1
| <div class="wrap"><img src="https://dummyimage.com/1000x1000/6278ad/fff.png" alt=""/><img src="https://dummyimage.com/1000x1000/ab6196/fff.png" alt=""/><img src="https://dummyimage.com/1000x1000/61ab8d/fff.png" alt=""/></div> |
|
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| *,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
html,body{height:100%;width:100%}
.wrap{position:relative;background:url(https://dummyimage.com/1000x1000/bababa/fff.png&text=Background+there) no-repeat 50% 50%;background-size:cover;border:2px solid #000;width:70%;height:30%;min-height:200px;min-width:300px;margin:5% auto;overflow:hidden}
img{position:absolute;max-width:100%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:0;-webkit-animation:anim 21s linear infinite;animation:anim 21s linear infinite}
img:nth-of-type(2){-webkit-animation-delay:7s;animation-delay:7s}
img:nth-of-type(3){-webkit-animation-delay:14s;animation-delay:14s}
@-webkit-keyframes anim{
0%{opacity:0}
30%{opacity:0}
50%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(2);transform:translate(-50%,-50%) scale(2)}
70%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(2);transform:translate(-50%,-50%) scale(2)}
100%{opacity:0}
}
@keyframes anim{
0%{opacity:0}
30%{opacity:0}
50%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(2);transform:translate(-50%,-50%) scale(2)}
70%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(2);transform:translate(-50%,-50%) scale(2)}
100%{opacity:0}
} |
|
(
