个人中心
gpt4 book ai didi

javascript - 动画不工作，使用关键帧，无前缀

转载 作者：行者123 更新时间：2023-11-28 09:04:30 25 4
gpt4 key购买 nike

我定制了一个无前缀安装的codepen笔，并安装了prefix-free prefixfree.dynamic-dom.min.js ，但代码仍然没有动画。我需要做些什么来制作这个动画(不是在代码笔中，而是在我的代码中放置无前缀之后)？

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

最佳答案

prefix-free 未包含在 codepen 中。在 CSS Pane 中检查它，它有效。

这是一个 fork :

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

关于javascript - 动画不工作，使用关键帧，无前缀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26766003/

25 4 0
文章推荐： css - 如何让我的 css 为我的 dojo dijit 表单按钮正常工作？
文章推荐： javascript - jQuery 不返回任何值
文章推荐： html - 如何在 Logo 上将页面的中间部分向上拉，但保持背景向下？
文章推荐： html - 如何仅覆盖标题行的 css 类，但将表的其余部分保留为表的样式类？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com