/
css.css
84 lines (83 loc) · 1.65 KB
/
css.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
/* **********************************************
Basic mechanics
Hide all paragraphs by default
Show them when they receive the class 'on'
Hide them when they receive the class 'off'
Feel free to adjust the defaults to your needs.
********************************************** */
#closed-captions p {
opacity: 0;
transition: .05s;
position: absolute;
}
#closed-captions .on {
opacity: 1;
}
#closed-captions .off {
transition: .2s;
opacity: 0;
}
.voice1 {
font-style: italic;
}
/* **********************************************
The first paragraph, with extended timing for
all siblings. Basically what it does is that
it shows the text after a delay, which
corresponds with the time that the word is
spoken.
You probably want to change the styling.
********************************************** */
.p0 span {
opacity: 0;
}
.p0.on span:first-of-type {
opacity: 1;
transition: 0s;
}
.p0.on span:nth-of-type(2) {
opacity: 1;
transition: 0s .4s;
margin-right: -.25em;
}
.p0.on span:nth-of-type(3) {
opacity: 1;
transition: 0s .5s;
margin-right: -.25em;
}
.p0.on span:nth-of-type(4) {
opacity: 1;
transition: 0s .7s;
margin-right: -.25em;
}
.p0.on span:nth-of-type(5) {
opacity: 1;
transition: 0s 1.1s;
margin-right: -.25em;
}
.p0.on span:nth-of-type(6) {
opacity: 1;
transition: 0s 1.4s;
margin-right: -.25em;
}
.p0.on span:nth-of-type(7) {
opacity: 1;
transition: 0s 1.7s;
margin-right: -.25em;
}
.p0.on span:nth-of-type(8) {
opacity: 1;
transition: 0s 2s;
}
.p0.on span:nth-of-type(9) {
opacity: 1;
transition: 0s 3s;
}
.p0.on span:nth-of-type(10) {
opacity: 1;
transition: 0s 3.2s;
}
.p0.on span:nth-of-type(11) {
opacity: 1;
transition: 0s 3.7s;
}