html, body{ width:100%; height:100%; margin:0; padding:0; overflow-x:hidden; } @keyframes fadeIn { 0% {opacity:0; top:60%} 50%{top:51%} 100% {opacity:1; top:50%} } @keyframes fadeOut { 0% {opacity:1; top:50%; left:1%} 100% {opacity:0; left:-15%;} } #container{ position:absolute; top:50%; left:1%; /* width:15%; */ max-width:25%; transform: translateY(-50%); } .fadeIn{ animation: fadeIn ease 1s forwards; } .fadeOut{ animation: fadeOut ease 1s forwards; } #box{ width:100%; background: linear-gradient(180deg, rgb(0, 153, 255) 0%, rgb(50, 173, 255) 100%); border-radius:5px; } #box:after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 8px solid transparent; border-left-color: rgb(20, 143, 225); border-left: 0; margin-top: -8px; margin-left: -8px; } #title, #text{ width:calc(100% - 20px); } #text{ padding:10px; color:#fff; font-family: 'Roboto Condensed', sans-serif; font-size:16px; text-align:center; }