Анимация градиента на тексте

<style>
.gradient .tn-atom {
animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -o-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -ms-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>

<!--Увеличение точки-->
<style>
/*Настройки кнопки*/
:root {
--DotColor: #E1FC52; /*цвет круга*/
--TextColorHover: #000; /*цвет текста по наведению*/
--ImgDot: url(https://static.tildacdn.com/tild3531-6263-4462-a630-393530366431/Frame_6757786.png), url(https://static.tildacdn.com/tild3531-6263-4462-a630-393530366431/Frame_6757786.png); /*цвет текста по наведению*/
}
.dot-scale .tn-atom {
overflow: hidden !important;
position: relative;
transition: all 1.2s ease-in-out, color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
}
.dot-scale:hover .tn-atom {
transition-delay: 0.2s;
background: var(--DotColor) !important;
transition: background 2.3s ease-in-out !important;
}
.dot-scale .tn-atom:after {
content: '';
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
align-items: center;
right: 15px;
border-radius: 1000px;
background-color: var(--DotColor);
background-size: cover;
top: 50%;
transform: translateY(-50%);
transition: transform 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.dot-scale .tn-atom:before {
content: "";
display: inline-block;
height: 12px;
width: 12px;
background-image: var(--ImgDot);
background-position: 0 0px, -12px -12px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
right: 15px;
top: 50%;
transform: translateY(-50%);
position: absolute;
z-index: 9;
animation-name: buttonArrow;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
@keyframes buttonArrow {
0% {
background-position: 0 0px, -12px 12px;
}
100% {
background-position: 12px -12px, 0 0;
}
}
.dot-scale:hover .tn-atom:before {
opacity: 1;
}
.dot-scale:hover .tn-atom:after {
transform: scale(50);
}
.dot-scale .tn-atom {
overflow: hidden;
}
.dot-scale div {
display: inline-block;
z-index: 1;
position: relative;
transition: color 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
margin-right: 15px;
}
.dot-scale:hover div {
color: var(--TextColorHover);
}
</style>
<script>
$('.dot-scale-2').addClass('dot-scale');
</script>
<script>
var btndots = document.querySelectorAll('.dot-scale .tn-atom');
btndots.forEach(function(btndots) {
var divDot = document.createElement('div');
divDot.textContent = btndots.textContent;
var fontSize = window.getComputedStyle(btndots).fontSize;
divDot.style.fontSize = fontSize;
btndots.innerHTML = '';
btndots.appendChild(divDot);
});
</script>