爲什麼我的動畫無效

-2

由於某種原因，此動畫無法正常工作。我希望它看起來像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; 
}

我只把少數：第n個孩子的，因爲我不想以填補職位。

@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刻字

來源

2012-12-04 user1876378

你的文字（）函數是什麼？你忘了包括圖書館嗎？ – Jon

[工作頁面]（http://tympanus.net/Tutorials/TypographyEffects/index6.html）包含['lettering.js'插件]（http://tympanus.net/Tutorials/TypographyEffects/js/jquery）。 lettering.js），你的jsFiddle不會。另外，如果你想在jsFiddle中運行jQuery，你不能選擇Mootools ...選擇「jQuery」。 – Sparky

添加到Sparky的評論，一旦你在下拉菜單中選擇jQuery 1.8（或任何你想要的版本），你可以直接將jQuery放入jQuery模塊中......不需要腳本標籤！ – Jon

這至少淡入像你想要的（但不是逐字符）。爲此，我會檢查CSS，因爲它看起來像是爲每個h2字母的每個孩子做的。確保您在「Saturday Night Live」中的每個角色都有延遲設置，包括空格。

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]

來源

2012-12-04 17:00:53 Jon

第n個孩子不是每個角色都是？ – user1876378

我不明白它是如何工作（在某種程度上）在那個jsfiddle，但不是在我的網站http://spencedesign.netau.net/SNL/SNL.html# – user1876378

嘗試使用這個作爲你的來源而不是「jquerylettering .js「---> http://tympanus.net/Tutorials/TypographyEffects/js/jquery.lettering.js – Jon

對不起，這可能是稍微偏離主題，但怎麼來的谷歌想出了沒事就參考： 動畫：向後磨礪 0.9S線性的; ???

我想了解更多關於這一點，我無法找到它在任何地方記錄，也不是如果有逆向操作即。模糊這也讓我感興趣..

相信我我不會在這裏問谷歌給我的東西，但悲傷無濟於事，任何人都知道嗎？

來源

2014-11-02 01:42:42

爲什麼我的動畫無效

回答

相關問題