JSFiddle - React, Tailwind, and code Playground
HTML
<title>Пример анимации</title>
</head>
<body>
<h1 id="text"><span class="red">9</span>9866</h1>
</body>
CSS
.red {color: #ff0000;}
#text {
text-align: center;
font-size: 120pt;
font-family: Tahoma;
margin-top: 150px;
-webkit-animation-name: rotation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotation;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotation;
-o-animation-duration: 10s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: rotation;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-moz-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-o-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(720deg);
...