I'm attempting to customize my Twitch Alert in Streamlabs using code.
Is there a way to incorporate animation into the text balloon? I've looked for tutorials or guides but haven't had any luck, so I could use some guidance.
CSS
#alert-user-message{
min-width: 48px;
min-height: 32px;
max-width: 605px;
max-height: 158px;
margin-bottom: -195px;
margin-left: 100px;
padding: 16px;
background: #FFF; border-radius: 30px 30px 30px 30px; border: 2px solid #fff;
box-shadow: 10px 10px 10px rgba(9, 19, 20, 0.35);
position: relative;
text-overflow: ellipsis;
overflow: hidden;
}
#alert-user-message:before{
content:"\A";
left: calc(50% - 2rem);
border-style: solid;
border-width: 0rem 2rem 2rem 2rem;
border-color: transparent transparent #FFF transparent;
position: fixed !important;
margin-top: -35px;
margin-left: -100px;
margin-right: 0px;
}
HTML
<!-- alert image -->
<div id="alert-image-wrap">
<div id="alert-image"></div>
</div>
<!-- main alert box window -->
<div id="alert-text-wrap">
<!-- alert text -->
<div id="alert-text">
<!-- alert message -->
<!-- messageTemplate will be replaced with your message template -->
<!-- for example : {name} is now following! or {name} donated {amount} -->
<div id="alert-message">}</div>
<div id="alert-user-message"></div>
</div>
</div>