动画不起作用，使用关键帧，无前缀

时间：2014-11-05 20:01:04

标签： javascript jquery html css

我定制了一个没有安装前缀的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

2 个答案:

答案 0 :(得分：0)

prefix-free未包含在codepen中。在CSS窗格中检查它，它可以工作。

这是一个分叉：

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

答案 1 :(得分：0)

您的HTML调用中似乎有一个错误，可以从google标准化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"

请包含前缀。它不见了。

相关问题
最新问题