├── 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 |
27 |

Section 1

28 |
29 | 30 |
31 |

Section 2

32 |
33 | 34 |
35 |

Section 3

36 |
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 | } --------------------------------------------------------------------------------