0
Я пытаюсь посмотреть, изменит ли CSS-анимацию семейство шрифтов. Я googled, но никто, кажется, не имеет демо для изменения семейства шрифтов с ключевыми кадрами. Мой код не работает. Нужно ли мне больше префиксов поставщиков?css keyframes change font-family style
<!DOCTYPE HTML>
<html>
<head>
<title>Font Change</title>
<link rel="stylesheet" href=".css">
<style>
#font
{
width: 500px;
height: 50px;
-webkit-animation-name: newfont;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: newfont;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: infinite;
animation-name: newfont;
animation-duration: 3s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@-webkit-keyframes newfont
{
0% {font-family: "Arial";}
33% {font-family: "Comic Sans MS";}
66% {font-family: "Impact"; }
}
@-moz-keyframes newfont
{
0% {font-family: "Arial";}
33% {font-family: "Comic Sans MS";}
66% {font-family: "Impact"; }
}
@keyframes newfont
{
0% {font-family: "Arial";}
33% {font-family: "Comic Sans MS";}
66% {font-family: "Impact"; }
}
</style>
</head>
<body>
<div id="font">
This is some text that has it's font changed with an animation.
</div>
</body>
</html>
Вероятно, это не работает, потому что ни один браузер не поддерживает переходы типа шрифта. Реализация этого будет довольно сложной, особенно учитывая, что она не очень полезна во многих случаях. – Overv