I'm trying to add and modify some animated CSS that I found to a 'subscription form' that I originally created. The problem is that the animation I found does not fit within the confines of my form (i.e., it's too big). I've tried to change the font size of the animation, but that seems to make things worse. I'm not even certain that my html is 100% correct. At best, I am a beginner. You'll find my code below:
<!DOCTYPE html>
<html>
<head>
<style>
/*Original CSS for animated text I found*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #000;
font-size: 60px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
/*Original CSS for my form*/
form {
border: 5px solid #000;
padding: 3px;
text-align: center;
border-left-width: 10px;
border-right-width: 10px;
width: 500px;
background-color: #efefef;
height: 200px;
}
input[type=submit] {
display: inline;
padding: 10px 30px;
font-weight: 300;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
font-size: 15px;
}
input[type=submit] {
background-color: #ff0000;
color: #fff;
border: 1px solid #000;
font-weight: bold;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #ff5e5e;
}
.directions {
font-weight: bold;
}
input[type=text] {
width: 200px;
}
</style>
</head>
<body>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" `onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/BKkas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">`
<div class="wrapper">
<div class="static-txt">Subscribe</div>
<ul class="dynamic-txts">
<li><span>Enter Your Email</span></li>
<li><span>To get the most recent news</span></li>
<li><span>delivered right to your inbox.</span></li>
<li><span>SIGN-UP NOW!</span></li>
</ul>
</div>
<p><input type="text" name="email"/></p><br/>
<input type="hidden" value="blogspot/BKkas" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</body>
</html>