-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslideshow.css
32 lines (28 loc) · 855 Bytes
/
slideshow.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
/* Simple CSS slideshow for the landing page.
* Pretty much lifted from https://snook.ca/archives/html_and_css/simplest-css-slideshow
*/
@keyframes fade {
0% { opacity: 0; visibility: hidden; }
11.11% { opacity: 1; visibility: visible; }
33.33% { opacity: 1; visibility: visible; }
44.44% { opacity: 0; visibility: hidden; }
100% { opacity: 0; visibility: hidden; }
}
.slideshow div {
opacity: 0;
visibility: hidden;
animation-name: fade;
animation-duration: 9s;
animation-iteration-count: infinite;
position:absolute;
left:0;
right:0;
}
.slideshow div:nth-child(1) { animation-delay: 0s; }
.slideshow div:nth-child(2) { animation-delay: 3s; }
.slideshow div:nth-child(3) { animation-delay: 6s; }
.slideshow img { height: 194px; }
.slideshow-wrapper {
position: relative;
height: 194px;
}