slider/style.css at master · ModupeVictoria/slider · GitHub

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
.slider1,
.slider2,
.slider3 {
    width: 100%;
    height: 100%;
    position: absolute;
}

.slider1{
    background: url(img/img.jpg)no-repeat;
    background-size: contain;
    animation: slide 30s infinite;
    -webkit-animation: slide 30s infinite;
}
.slider2{
    background: url(img/img2.jpg)no-repeat;
    background-size: contain;
    animation: slide2 30s infinite;
    -webkit-animation: slide2 30s infinite;
}
.slider3{
    background: url(img/img3.jpg)no-repeat;
    background-size: contain;
    animation: slide3 30s infinite;
    -webkit-animation: slide3 30s infinite;
}

@keyframes slide {
    0% {opacity: 0;}
    33% {opacity: 1}
    60% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes slide2 {
    0% {opacity: 0;}
    33% {opacity: 0;}
    60% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes slide3 {
    0% {opacity: 1;}
    33% {opacity: 0;}
    60% {opacity: 0;}
    100% {opacity: 1;}
}