我现在正在开发一些键入动画。
它在除边缘以外的所有浏览器上都完美。
您可以从代码段中看到,光标应始终在第三行末尾可见。但是在边缘,每行的末尾都可以看到。
,我想我的密钥帧无法正常工作。请帮助。
.css-typing1 p {
border-right: 0.03em solid black;
color: black;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
font-size: 1em;
text-align: left;
}
.css-typing1 p:nth-child(1) {
width: 18em;
-webkit-animation: type 1.5s steps(40, end);
animation: type 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(2) {
width: 18em;
opacity: 0;
-webkit-animation: type2 1.5s steps(40, end);
animation: type2 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(3) {
width: 18em;
opacity: 0;
-webkit-animation: type3 1.5s steps(40, end);
animation: type3 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
@-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: none;
}
}
<div class="css-typing1">
<p>
Some text for row number 1
</p>
<p>
Some text for row number 2
</p>
<p>
Some text for row number 3
</p>
</div>
问题是IE边缘没有识别您在密钥帧中使用的border:none
。在您的代码中,使用border:0
代替border:none
。
.css-typing1 p {
border-right: 0.03em solid black;
color: black;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
font-size: 1em;
text-align: left;
}
.css-typing1 p:nth-child(1) {
width: 18em;
-webkit-animation: type 1.5s steps(40, end);
animation: type 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(2) {
width: 18em;
opacity: 0;
-webkit-animation: type2 1.5s steps(40, end);
animation: type2 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(3) {
width: 18em;
opacity: 0;
-webkit-animation: type3 1.5s steps(40, end);
animation: type3 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: 0;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
@-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: 0;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: none;
}
}
<div class="css-typing1">
<p>
Some text for row number 1
</p>
<p>
Some text for row number 2
</p>
<p>
Some text for row number 3
</p>
</div>