1

到目前为止得到了这个

http://codepen.io/tacrossman/pen/GJglH

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

当我尝试做类似的事情时

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

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

如果您还需要什么，请告诉我，非常感谢

4

3 回答 3

1

像这样？很确定这是您想要实现的目标。

更新 Codepen 结果

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

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

于 2013-10-14T17:21:57.443 回答
0

您使用的是 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;
    }
}
于 2013-10-14T17:21:49.453 回答
0

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

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

于 2013-10-14T17:41:05.247 回答