Ewalia78 Posted October 18, 2019 Share Posted October 18, 2019 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 ! Link to comment
creedon Posted October 19, 2019 Share Posted October 19, 2019 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.