-
Notifications
You must be signed in to change notification settings - Fork 90
/
main.css
95 lines (85 loc) · 1.69 KB
/
main.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
body {
background-color: #c6d7de;
font-family: 'Montserrat';
padding: 3em;
}
#v0 {
position: fixed;
bottom: 0;
right: 0;
width: 70%;
}
#set-height {
display: block;
}
section {
z-index: 1;
position: relative;
}
.content {
position: sticky;
position: -webkit-sticky;
width: 100%;
top: 33.3%;
}
h1 {
font-size: 3em;
background: #fff;
display: inline-block;
padding: 10px 15px;
border-radius: 5px;
margin: 0;
}
p { font-size: 1.5em; }
section:nth-of-type(1) {
height: 1200px;
}
section:nth-of-type(2) {
height: 1200px;
}
section:nth-of-type(3) {
height: 1200px;
}
section:nth-of-type(4) {
height: 1000px;
}
section:nth-of-type(5) {
height: 4000px;
}
.entered {
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
* Generated by Animista on 2018-7-4 16:24:12
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation text-focus-in
* ----------------------------------------
*/
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}