Text animation using css html

<div class="container">
        <p class="text1">Welcome in</p>
        <p class="text2">www.tolmatol.com</p>
    </div>

body { background: #000;}
       .container {  position: absolute; left: 50%; top:50%; width: 100%; text-align: center;transform: translate(-50%,-50%);}
       .container p { text-transform: uppercase; margin: 0; padding: 0; font-family:sans-serif}
       .container p.text1 { font-size: 75px; color: #fff; background: #000; position: relative; margin-bottom:20px; animation: text 3s 1;}
       .container p.text2 { font-size: 30px; color: aqua; }
       
       @keyframes text {
           0%{ color: #000; margin-bottom: -40px;}
           30% { letter-spacing: 25px; margin-bottom: -40px;}
           85% { letter-spacing: 8px; margin-bottom: -40px;} 
       }