使用 CSS3 为 SVG 制作动画 - 来自可滚动演示答案

【问题标题】：Using CSS3 to animate a SVG - from a scrollable demo使用 CSS3 为 SVG 制作动画 - 来自可滚动演示
【发布时间】：2016-03-06 02:18:34
【问题描述】：

我对这个html5横幅的最后要求，我完全不知所措。

请看这里：http://pepsized.com/demo/?id=665

如果您向下滚动页面，您会看到一条包裹页面的丝带和包装纸，这正是我需要为我需要交付的横幅所做的。它使用一个滚动插件来调整功能区的宽度，然后对蝴蝶结进行动画处理，从而产生包裹它的效果，这是我想要理想使用的效果，但不必像我用作横幅上的最后一帧那样滚动。

我是 CSS 动画和 SVG 的新手。我如何使用以下标记，但在 300x250 的容器大小内为该横幅的最后一帧设置动画？我想用一个关键帧制作相同的效果。

<div class="ribbon">
    <div id="ribbon-left" class="ribbon" data-1500="width:0%;" data-2500="width:50%;" ></div>
    <div id="ribbon-right" class="ribbon" data-1500="width:0%;" data-2500="width:50%;" ></div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px" >
        <path class="" style="fill:none;stroke:#49675f;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0" data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;" d="M169,174C123,169-17.5,87.5,36,34S169,174,169,174z" />
        <path class="" style="fill:none;stroke:#49675f;stroke-width:40; stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0" data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;"  d=" M169,174c46-5,186.5-86.5,133-140S169,174,169,174z"/>
    </svg>
</div>

CSS

.ribbon {
    background:#49675f;
    height:40px;
    top:50%;
    margin-top:-20px;
    z-index:3;
}
#ribbon-left {
    left:0
}
#ribbon-right {
    right:0
}
.ribbon svg {
    position:absolute; 
    z-index:5; 
    left:50%; 
    top:50%; 
    margin-left:-170px; 
    margin-top:-180px
}

更新

我已经对代码进行了调整并满足了我的需求，我可以制作出左右上下的动画，但我需要一些关于弓本身的帮助。

JSFiddle：http://jsfiddle.net/8j735jzw/1/

【问题讨论】：

别担心，我自己编写了代码，关键帧和所有工作都很可爱:)

标签： jquery css svg css-animations

【解决方案1】：

聚会迟到了..

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

html

  <svg width="150" height="125" xmlns="http://www.w3.org/2000/svg">
   <g>
    <title>Layer 1</title>
    <path class="path" fill="none" stroke="#49675f" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="0" d="m78,100c-19.34616,-2.14285 -78.43605,-37.07143 -55.93563,-60s55.93563,60 55.93563,60z"/>

    <path class="path"  fill="none" stroke="#49675f" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="0" d="m80,100c16.17308,-2.75 65.57129,-47.575 46.76129,-77s-46.76129,77 -46.76129,77z"/>
   </g>

  </svg>

喜欢看到你更新的代码，这个想法太棒了..

【讨论】：