| @keyframes container-animation { |
| from, 40% { |
| background-color: rgba(0, 0, 0, 1); |
| } |
| to { |
| background-color: rgba(0, 0, 0, 0); |
| } |
| } |
| |
| .intro-container { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background-color: rgb(0, 0, 0); |
| |
| animation: container-animation 10s linear forwards; |
| } |
| |
| @keyframes text-animation { |
| from, to { |
| opacity: 0; |
| } |
| |
| 35%, 75% { |
| opacity: 1; |
| } |
| } |
| |
| .intro-text { |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 100%; |
| text-align: center; |
| color: rgb(255, 255, 255); |
| font-size: 70px; |
| |
| animation: text-animation 4s 1s both; |
| } |