Question

到目前为止已经有了这个

但我想要的是在写出每个新单词（跨度）后光标闪烁动画运行。

当我尝试做类似

的事情时

.type:after {   
    content:"_";    
    opacity: 0;     
    animation: cursor 1s infinite; 
}

它没有达到预期的效果。我认为动画中存在冲突，因为我在技术上运行已经动画化的动画。

如果您需要其他任何信息，请通知我，非常感谢

Answer 1

喜欢这个？很确定这是你想要实现的目标。

Updated Codepen result

span > span {
    animation: cursor 1s infinite;
}

我还在动画中修复了一些故障..有些是相互重叠的。

Answer 2

您使用的是Safari还是Chrome？我正在使用Firefox，我注意到一个问题是你的前缀不一致。

这是没有webkit前缀的新代码（如果你愿意，可以添加它们，但考虑到它不适合你，我假设它们没有必要）：

使用JSBIN：http://jsbin.com/ITokiXO/1/edit

.type{
    position: absolute;
    opacity: 0;
  width: 12ch;
    overflow: hidden;
    animation: words 18s steps(12) infinite 0s;
}
.type:nth-child(2) { 
  -webkit-animation-delay: 3s; 
  animation-delay: 3s;
}
.type:nth-child(3) { 
  -webkit-animation-delay: 6s; 
  animation-delay: 6s;
}
.type:nth-child(4) { 
  -webkit-animation-delay: 9s;
    animation-delay: 9s; 
}
.type:nth-child(5) { 
  -webkit-animation-delay: 12s; 
    animation-delay: 12s; 
}
.type:nth-child(6) { 
  -webkit-animation-delay: 15s;
    animation-delay: 15s; 
}

@keyframes words {
  0% { opacity: 0; width:0; }
  2% { opacity: 1;}
  14% { opacity: 1; width: 12ch;}
  15% { opacity: 0; }
}

.cursor:after {
    content:" _";
    opacity: 0;
    animation: cursor 1s infinite;
}

@keyframes cursor {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

Answer 3

这是一种类型效果，但它在动画功能中使用步骤：

http://codepen.io/jonathan/pen/lwFzv

@-webkit-keyframes typing {
from { width: 0 }
to { width:14em }
}

@keyframes typing {
from { width: 0 }
to { width:14em }
}

@-webkit-keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}

@keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}

body { font-family: Consolas; }

h1 { 
font-size:150%;
width:14em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid #333;

-webkit-animation: typing 13s steps(26, end), 
                    caret 0.5s step-end infinite;
animation: typing 13s steps(26, end), 
                    caret 0.5s step-end infinite;
}

您会注意到步骤设置为26，这是我H1中的字符数

<h1>Typing Effect by Jonathan.</h1>

你可以使用：after但它可能需要JS来计算每个单词的单词长度

最好始终添加没有供应商前缀的属性，以便它可以在支持动画属性的浏览器中使用..就像在这种情况下，firefox不需要供应商前缀

http://caniuse.com/#feat=css-animation

CSS使用多个跨度键入动画

3 个答案:

CSS使用多个跨度键入动​​画

3 个答案:

CSS使用多个跨度键入动画