├── index.html └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Intro Animation | Codegrid 7 | 8 | 9 | 10 |
codegrid
11 | 12 |
13 |
14 |
less is more
15 |
less is more
16 |
less is more
17 |
less is more
18 |
less is more
19 |
less is more
20 |
less is more
21 |
less is more
22 |
less is more
23 |
less is more
24 |
less is more
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | width: 100%; 6 | height: 100vh; 7 | } 8 | 9 | .header { 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%, -50%); 14 | font-family: "Monument Extended"; 15 | text-transform: uppercase; 16 | font-size: 100px; 17 | z-index: -1; 18 | } 19 | 20 | .container { 21 | width: 100%; 22 | height: 100vh; 23 | margin: 0px auto; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | background: #161616; 28 | animation: slide-out-container 4s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s; 29 | animation-fill-mode: forwards; 30 | } 31 | 32 | .text-wrapper { 33 | color: white; 34 | position: absolute; 35 | } 36 | 37 | .text { 38 | font-family: "Monument Extended"; 39 | font-weight: lighter; 40 | font-size: 54px; 41 | } 42 | 43 | .text-1, 44 | .text-3, 45 | .text-4, 46 | .text-8, 47 | .text-9, 48 | .text-11 { 49 | color: rgba(0, 0, 0, 0); 50 | -webkit-text-stroke: 1px white; 51 | } 52 | 53 | @keyframes blink { 54 | 0% { 55 | opacity: 0%; 56 | } 57 | 1% { 58 | opacity: 100%; 59 | } 60 | 99% { 61 | opacity: 100%; 62 | } 63 | 100% { 64 | opacity: 0; 65 | } 66 | } 67 | 68 | .text-1 { 69 | animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s; 70 | opacity: 0; 71 | } 72 | 73 | .text-2 { 74 | animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s; 75 | opacity: 0; 76 | } 77 | 78 | .text-3 { 79 | animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s; 80 | opacity: 0; 81 | } 82 | 83 | .text-4 { 84 | animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s; 85 | opacity: 0; 86 | } 87 | 88 | .text-5 { 89 | animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s; 90 | opacity: 0; 91 | } 92 | 93 | .text-6 { 94 | animation: blink 0.8s linear 0.4s, blink 0.8s linear 2.5s, slide-out 1s linear 3.2s; 95 | opacity: 0; 96 | } 97 | 98 | .text-7 { 99 | animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s; 100 | opacity: 0; 101 | } 102 | 103 | .text-8 { 104 | animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s; 105 | opacity: 0; 106 | } 107 | 108 | .text-9 { 109 | animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s; 110 | opacity: 0; 111 | } 112 | 113 | .text-10 { 114 | animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s; 115 | opacity: 0; 116 | } 117 | 118 | .text-11 { 119 | animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s; 120 | opacity: 0; 121 | } 122 | 123 | @keyframes slide-out { 124 | 0% { 125 | opacity: 0%; 126 | } 127 | 1% { 128 | opacity: 100%; 129 | } 130 | 131 | 19% { 132 | opacity: 100%; 133 | } 134 | 20% { 135 | opacity: 0%; 136 | } 137 | 138 | 39% { 139 | opacity: 0%; 140 | } 141 | 40% { 142 | opacity: 100%; 143 | } 144 | 145 | 59% { 146 | opacity: 100%; 147 | } 148 | 60% { 149 | opacity: 0%; 150 | } 151 | 152 | 79% { 153 | opacity: 0%; 154 | } 155 | 80% { 156 | opacity: 100%; 157 | } 158 | 159 | 100% { 160 | opacity: 100%; 161 | } 162 | } 163 | 164 | @keyframes slide-out-container { 165 | 0% { 166 | height: 100vh; 167 | } 168 | 169 | 40% { 170 | height: 100vh; 171 | } 172 | 173 | 100% { 174 | height: 0%; 175 | } 176 | } 177 | 178 | @media (max-width: 990px) { 179 | .header { 180 | font-size: 24px; 181 | } 182 | 183 | .text { 184 | font-size: 24px; 185 | } 186 | } 187 | --------------------------------------------------------------------------------