├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # CSS-Page-Transition
2 |
3 |
4 |
5 | https://user-images.githubusercontent.com/42389395/177300465-22fbc182-6e9c-4e66-abcf-096d0b500642.mov
6 |
7 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Test
7 |
8 |
9 |
10 |
11 |
12 | Section 1
13 | Section 2
14 | Section 3
15 |
16 |
25 |
26 |
29 |
30 |
33 |
34 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | -webkit-font-smoothing: antialiased;
3 | -moz-osx-font-smoothing: grayscale;
4 | text-rendering: optimizeLegibility;
5 | text-align: center;
6 | height: 100%;
7 | overflow: hidden;
8 | margin: inherit;
9 | }
10 |
11 | nav {
12 | position: fixed;
13 | top: 0;
14 | left: 0;
15 | right: 0;
16 | z-index: 1;
17 | background: #370926;
18 | }
19 | nav ul li {
20 | display: inline-block;
21 | }
22 | nav ul li a {
23 | color: rgba(255, 255, 255, 0.45);
24 | font-size: 0.875rem;
25 | display: block;
26 | text-decoration: none;
27 | padding: 6px 15px;
28 | }
29 | nav ul li a:hover {
30 | color: #fff;
31 | }
32 |
33 | section {
34 | height: 100%;
35 | width: 100%;
36 | display: table;
37 | pointer-events: none;
38 | z-index: 0;
39 | -webkit-transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);
40 | transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);
41 | }
42 | section h1 {
43 | display: table-cell;
44 | vertical-align: middle;
45 | text-align: center;
46 | color: #fff;
47 | font-weight: lighter;
48 | }
49 |
50 | #one {
51 | background: #42113C;
52 | }
53 |
54 | #two {
55 | background: #618B25;
56 | }
57 |
58 | #three {
59 | background: #6BD425;
60 | }
61 |
62 | a[id="one"]:target ~ #one {
63 | -webkit-transform: translate3d(0, 0, 0);
64 | transform: translate3d(0, 0, 0);
65 | }
66 |
67 | a[id="two"]:target ~ #two {
68 | -webkit-transform: translate3d(0, -100%, 0);
69 | transform: translate3d(0, -100%, 0);
70 | }
71 |
72 | a[id="three"]:target ~ #three {
73 | -webkit-transform: translate3d(0, -200%, 0);
74 | transform: translate3d(0, -200%, 0);
75 | }
--------------------------------------------------------------------------------