css 字体怎么动画,CSS文字动画

html {

height:100%;

}

body {

height:100%;

display:flex;

justify-content:center;

align-items:center;

background:rgb(196,14,14);

margin:0 auto;

}

main {

width:400px;

height:230px;

border:10px solid white;

position:relative;

cursor:pointer;

}

main div {

width:100%;

height:100%;

position:absolute;

font-size:100px;

text-align:center;

line-height:230px;

font-family:黑体;

font-weight:bold;

}

.first {

color:white;

}

.second {

width:0px;

position:absolute;

overflow:hidden;

background:white;

transition:4s;

animation:one 5s ease-in-out 1;

animation-fill-mode:both;

}

.seconds {

color:rgb(196,14,14);

width:400px;

}

@keyframes one {

0% {

width:0px;

}

25% {

width:50px;

}

50% {

width:150px;

}

100% {

width:400px;

}

}.three {

width:0px;

background:rgb(224,9,9);

overflow:hidden;

right:0;

animation:two 5s linear 1;

animation-fill-mode:both;

animation-delay:5s;

}

@keyframes two {

0% {

width:0px;

}

100% {

width:200px;

}

}.threes {

width:400px;

color:white;

position:absolute;

animation:twos 5s linear 1;

animation-fill-mode:both;

animation-delay:5s;

}

@keyframes twos {

0% {

left:-400px;

}

100% {

left:-200px;

}

}