動畫無法正常工作，無前綴使用關鍵幀

我自定義了一個codepen筆，該筆已安裝了前綴，並安裝了prefix-free prefixfree.dynamic-dom.min.js，但該代碼仍未啓用動畫。我需要做什麼來使這個動畫（不是在codepen中，而是在我的代碼中添加前綴無關的）之後？動畫無法正常工作，無前綴使用關鍵幀

HTML：

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <style type="text/css"></style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script><script src="/javascripts/json2.js"></script> 
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400" rel="stylesheet" type="text/css"> 
    <script src="/javascripts/survey3_main.js"> </script><script src="/javascripts/prefixfree.dynamic-dom.min.js"> </script><script src="/javascripts/prefixFreePlugin.js"> </script> 
    <link rel="stylesheet" href="/stylesheets/survey3style.css"> 
    <link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.css"> 
</head> 
<body> 
com/svn/trunk/normalize.css"> 
<div id="pinDropDiv"> </div> 
<div id="pinHoldDiv"> 
    <div> 
     <img width="75" height="75" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAZJREFUeNrsnO1tGkEQhveQ/4cUEAlXEFxAZKgAUkGgAocK4CoAKuCoIJcKOJQCoANflAYoIbPWxEIRYG5n3v1AHmnFD5u9vYd3Z2b3Zi8znu3Pw5c2fQypfabW5dY+8+8HantuW2rVp92vgwlkmWdATwxHYhbcklrpG1zmAdKU2uiCelztwNAWvqBlQFAzVlIbfA8v0AjYLDlYBMlOsx/UOp5dip2eY4K2R12gpQzqO33sAoAy7At3NIZR9MqiQa7YN8VgBSlsHCWsyEDBgGU3CgoCrCUENY8YlLURR+WwyqJBDDnqpWB9UlgVBBaB6nDUaycCy+Zi99Lk1XUazhMCZXisc+/KIlX16GNj0jTRdLxzVBXC/r+JHuAa0xPXwSgLoKqC2vrcr81BZKAccZ3V1dRnPSkNuGSHO740cPpbyXnSPX9Hw77BlcUR8FlhsBMCsBCsPTXcwEeXyNhEWUOFQY5dQbHS7Hc1MvIhehoOhAPM6WYL6V1yHwthNwM0LEl0qjU356ivie1T0EUPBoujoMhPAdKAXJKksg+GKKsjVFWpTYqno0RdUcIqDc4qn1PxWlgfBIPaAmEh+3aGJXnWh3xMVccI693eYWFg1ZGOvx0jrN++E8Ar7fHWpuEA2LdkvQpbSEvyma7CCuDcqkKS/+1RsKQ+awpQlbTPGgKLlha1dOGqWYPA+1oitfI9wXyWtDplzhU2UlBdBVU5uZUmsH4qhPmNBBh/d6OQMmzRsCqFGWRvcsfTqCmomdF7sOt0L02f7uyMvCb02MFe3D09qkWdGsWaL7qm05P4ps8N14qw7M2vuAqnOjE1HkEJrfOW0Z3DhRAPWXvgTF/F97Yayrc22M08H1Z6gaUUFUNaIamkaQxLYe87pK1DLKTXCYKqpQVtrrAWBrtdjLBc2oETLJ73y4RAHTQCk2Q/KyV1LTXO9zjDSkhdByOvjRArKxV1LbVOjYlgJaAuNVU1XkhfWPA+mzCHm96yiaQeTHsavg4q0rxqodmhCiyukqkig6V+KqylPLhYnH2pcfwEBot3JGJw9geEqrSVZbgUch8YVo46YN5KwVc0sErbqUNh8YHu/Jamn2qedSb30ny4cY19RdSuoqfh6+A9RscCDQoKi6Ojj2R17ysphpYc8RZ0gfZTvl6v4qM+awJMJ6BvCPEOi391hP/KffgpL9HwRHTsGb2DnZA3gkQDi4GN6GMldegE6iFExuu1tFvh+Jv1T/1Qy4MsxEUdX8nyAurmX2N3Bph928i11cYqL7FIahqeWHDvrwTVDw0qqLJYXbZYze7ft98AFXrbJ7iy/uVg/Qs52DgWUMFhMbBza7ux76QzelhHKcXxHthC46T+TZuNkJxWRGl/BRgAtAd0cl+QnEwAAAAASUVORK5CYII=" class="pin"> 
     <div style="display: none;" class="pin-shadow"></div> 
    </div> 
</div> 
</body> 
</html>

CSS：

#pinHoldDiv div { 
    width: 77px; 
    height: 77px; 
    margin:25px auto; 
} 

.pin { 
    margin: 0 auto; 
    position: absolute; 
    transform-origin: 50% 100%; 
    animation-duration: .5s; 
    animation-name: bounce; 
} 

@keyframes "bounce" { 
0% { 
    opacity: 0; 
    animation-timing-function: ease-out; 
    transform: translateY(0) scale(0.9, 1.2); 
} 
11% { 
    opacity: 1; 
} 
22% { 
    transform: translateY(-13px) scale(0.9, 1.2); 
    animation-timing-function: ease-in; 
} 
48% { 
    transform: translateY(-9px); 
    animation-timing-function: ease-in-out; 
} 
65% { 
    transform: translateY(0) scale(1.05, 0.83); 
    animation-timing-function: ease-in-out; 
} 
72% { 
    transform: translateY(0) scale(1.15,0.7); 
    animation-timing-function: ease-out; 
} 
100% { 
    transform: translateY(0) scale(1,1); 
} 

} 

.info { 
    position: absolute; 
    top:10px; right:10px; 
    padding:5px;; 
    background:rgba(0,0,0,.5); 
    color:#FFF; 
    font:12px sans-serif; 
} 
.pin-shadow{ 
    position:absolute; 
    top:172px; 
    margin-left:-.75em;/*half of width.*/ 
    left:50%; 
    width:.01em; 
    height:.5em; 
    background-color:rgba(120,120,120,.5); 
    border-radius:100%; 
    -moz-animation:  pin-shadow 0.3s 0.3s forwards; 
    -webkit-animation: pin-shadow 0.3s 0.3s forwards; 
    -o-animation:  pin-shadow 0.3s 0.3s forwards; 
    animation:   pin-shadow 0.3s 0.3s forwards; 
} 
@-webkit-keyframes pin-shadow { 
    0%{ 
    width:.01em; 
    margin-left:-.005em;/*half of width.*/ 
    } 
    10%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    15%{ 
    width:1.1em; 
    margin-left:-.55em; 
    } 
    20%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    25%{ 
    width:1.2em; 
    margin-left:-.6em; 
    } 
    30%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    35%{ 
    width:1.3em; 
    margin-left:-.65em; 
    } 
    40%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    100%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
} 
@-moz-keyframes pin-shadow { 
    0%{ 
    width:.01em; 
    margin-left:-.005em;/*half of width.*/ 
    } 
    10%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    15%{ 
    width:1.1em; 
    margin-left:-.55em; 
    } 
    20%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    25%{ 
    width:1.2em; 
    margin-left:-.6em; 
    } 
    30%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    35%{ 
    width:1.3em; 
    margin-left:-.65em; 
    } 
    40%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    100%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
} 
@-o-keyframes pin-shadow { 
    0%{ 
    width:.01em; 
    margin-left:-.005em;/*half of width.*/ 
    } 
    10%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    15%{ 
    width:1.1em; 
    margin-left:-.55em; 
    } 
    20%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    25%{ 
    width:1.2em; 
    margin-left:-.6em; 
    } 
    30%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    35%{ 
    width:1.3em; 
    margin-left:-.65em; 
    } 
    40%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    100%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
} 
@keyframes pin-shadow { 
    0%{ 
    width:.01em; 
    margin-left:-.005em;/*half of width.*/ 
    } 
    10%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    15%{ 
    width:1.1em; 
    margin-left:-.55em; 
    } 
    20%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    25%{ 
    width:1.2em; 
    margin-left:-.6em; 
    } 
    30%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    35%{ 
    width:1.3em; 
    margin-left:-.65em; 
    } 
    40%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
    100%{ 
    width:1.5em; 
    margin-left:-.75em; 
    } 
}

JS：

$(function(){ 
    pin = $(".pin"); 
     $(document).click(function(e){ 
      pin.clone().appendTo("body").attr("style", "top: " + (e.pageY - 78) + "px; left: " + (e.pageX - 36.5) + "px;"); 
     pinshadow.clone().appendTo("body").attr("style", "top: " + (e.pageY-5) + "px; left: " + (e.pageX) + "px;");  
    }); 
    pinshadow = $(".pin-shadow"); 
     $(document).click(function(e){ 
     pinshadow.clone().appendTo("body").attr("style", "top: " + (e.pageY-5) + "px; left: " + (e.pageX) + "px;"); 
    }); 
});

你可以看到pindrop動畫工作像它應該的位置：http://codepen.io/maudulus/pen/ohFiH

來源

2014-11-05 maudulus

prefix-free未包含在密碼本中。在CSS窗格中檢查它，它工作。

這裏有一個叉：

http://codepen.io/anon/pen/iaIge

來源

2014-11-05 20:15:01 elzi

前綴無鉛現在在我的筆...問題是，動畫不工作以外的筆。 – maudulus 2014-11-05 20:21:46

看起來像是你自己發現了這個問題......前綴自由未被正確包含。這裏有一個直接鏈接到codepen輸出幀：查看源代碼：HTTP：//s.codepen.io/boomerang/93cce1a685f65ed60a5af182903d293f1415218979685/index.html 查看源代碼，並把它作爲您的標記應該是什麼樣子的參考。 – elzi 2014-11-05 20:23:43

是的，它不是。我如何正確包含它。我跟隨了文檔，它都鏈接在一起，包括jquery pluging，但不工作。 – maudulus 2014-11-05 20:24:34

看起來你在你的HTML調用的錯誤，從谷歌正常化CSS：

應該是以下：

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <style type="text/css"></style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script><script src="/javascripts/json2.js"></script> 
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400" rel="stylesheet" type="text/css"> 
     <script src="/javascripts/survey3_main.js"> </script> 
     <script src="/javascripts/prefixfree.dynamic-dom.min.js"> </script> 
     <script src="/javascripts/prefixFreePlugin.js"> </script> 
     <link rel="stylesheet" href="/stylesheets/survey3style.css"> 
     <!-- HERE --> 
     <link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.css"> 
     <!-- HERE --> 
    </head> 
    <body> 
     ...

而且，在聲明關鍵幀時請使用原始名稱，而不要用引號包裝它們。

// YES 
@keyframes bounce 

// NO 
// @keyframes "bounce"

並且請包含前綴無關。它缺失。

來源

2014-11-05 20:17:07

正常化是一個錯字。然而，將css從'@keyframes'反彈爲''@keyframes bounce'不會使動畫起作用。現在在代碼筆中添加了前綴無題，但問題在於，動畫不能在筆之外使用。 – maudulus 2014-11-05 20:23:12

你能組織一切到一個codepen，所以我可以編輯？ – 2014-11-05 20:33:20

動畫無法正常工作，無前綴使用關鍵幀

回答

相關問題