Question

由于某些原因，此动画无效。我希望它看起来像http://tympanus.net/Tutorials/TypographyEffects/index6.html我不明白为什么它不一样。在一个不相关的说明中，我还将背景颜色设置为黑色，因为我的背景图像有时不太合适。我不知道为什么。谢谢！代码是

body {
background-image: url('http://images.fanpop.com/images/image_uploads/SNL-Wallpaper-saturday-night-live-784022_1024_768.jpg');
background-size: cover;
background: #000;
}

.letter-container h2 a{
text-align: justify;
float: right;
margin-right: 100px;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
color: #fff;
cursor:default;
text-decoration: none;
}
.letter-container h2 a span {
color: #000;
opacity: 1;
text-decoration: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.9s linear backwards;   
-moz-animation: sharpen 0.9s linear backwards;  
-ms-animation: sharpen 0.9s linear backwards;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:nth-child(1) {
    animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
    animation-delay: 0.1s;
}

我只放了几个孩子，因为我不想填补帖子。

@keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}

（我也有每个网络版本的关键帧） html和Javascript是

<div id="letter-container" class="letter-container">
    <h2><a href="#">Saturday <br/> Night <br/> Live</a></h2>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    $("#letter-container h2 a").lettering();
                });
            </script>

编辑：要在网站上查看它http://spencedesign.netau.net/SNL/SNL.html我不明白这是怎么回事。是的，我确实添加了jquery刻字

Answer 1

这至少会像你想要的那样消失（但不是逐个字符）。为此，我会检查CSS，因为它看起来像是为h2字母的每个第n个孩子做的。确保在“周六夜现场”中为每个角色设置延迟，包括空格。

Fiddle

.letter-container h2 a span:nth-child(1) {
    animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
    animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
    animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
    animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
    animation-delay: 0.4s;
}
[...etc]

Answer 2

抱歉，这可能稍微偏离主题，但谷歌怎么没有提到任何参考： 动画：锐化 0.9s线性向后; ???

我想更多地了解这一点，我无法在任何地方找到它，也没有相反的操作，即。模糊，这也让我感兴趣..

相信我，我不会在这里询问谷歌是否给了我一些东西，但遗憾的是没有用，有人知道吗？

为什么我的动画不起作用

2 个答案: