.sqs-announcement-bar-text CHANGE THE FONT SIZE

Hello everyone !

So my problem is very simple, i want my announcement bar text to be animated. I only need the font getting bigger and smaller over time. I manage to make it change the color but the font doesn't want to change it size.  So anyone that have a solution is welcome 🙏 . 

Here is my website link :

https://rhino-bullfrog-fc8l.squarespace.com/

Here is my css for the announcement bar :

.sqs-announcement-bar {
background: linear-gradient(99deg, #ac96ce, #392345);
background-size: 400% 400%;
-webkit-animation: AnimationName 6s ease infinite;
-moz-animation: AnimationName 6s ease infinite;
animation: AnimationName 6s ease infinite;
}
.sqs-announcement-bar-text { 
-webkit-animation: AnimationName 6s ease infinite;
-moz-animation: AnimationName 6s ease infinite;
animation: AnimationName 6s ease infinite;
}
@-webkit-keyframes AnimationName {
from{color:0% !important;background-position:0% 51%}
50%{color:50% !important;background-position:100% 50%}
to{color:100% !important;background-position:0% 51%}
}
@-moz-keyframes AnimationName {
from{color:0% !important;background-position:0% 51%}
50%{color:50% !important;background-position:100% 50%}
to{color:100% !important;background-position:0% 51%}
}
@keyframes AnimationName {
from{color:0% !important;background-position:0% 51%}
50%{color:50% !important;background-position:100% 50%}
to{color:100% !important;background-position:0% 51%}
}
@-webkit-keyframes AnimationName {
from{color:0% !important;background-position:0% 49%}
50%{color:50% !important;background-position:100% 52%}
to{color:100% !important;background-position:0% 49%}
}
@-moz-keyframes AnimationName {
from{color:0% !important;background-position:0% 49%}
50%{color:50% !important;background-position:100% 52%}
to{color:100% !important;background-position:0% 49%}
}
@keyframes AnimationName {
from{color:0% !important;background-position:0% 49%}
50%{color:50% !important;background-position:100% 52%}
to{color:100% !important;background-position:0% 49%}
}

Thank you for taking the time to read my problem.

Have a nice day !

Perhaps the following will give you a start...

.sqs-announcement-bar-text p {

  animation-direction: alternate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: pulsate;
  
  }

@keyframes pulsate {

  from {
  
    transform: scale(.9,.9);
    
    }
    
  to {
  
    transform: scale(1,1);
    
    }
  }
 

You'd need to expand it to cover browser specifics of course.