html - 如何让 SVG 中的 Wings 移动？

Question

我用 SVG 制作了这个简单的翅膀，你可以在这里看到 ->

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

我的问题是:如何让它们移动？？我应该从哪里开始？

谢谢 :)

SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="183px" height="159.5px" viewBox="0 0 183 159.5" enable-background="new 0 0 183 159.5" xml:space="preserve">
<g class="wings">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M30.835,81.005c-2.062,0.463-4.049,0.568-6.003,0.018
        c-0.752-0.213-1.551-0.514-2.136-1.006c-1.08-0.91-1.619-2.482,0.424-3.371c0.217-0.096,0.459-0.129,0.681-0.217
        c3.698-1.48,7.59-2.438,11.198-4.164c1.65-0.79,3.332-1.513,4.958-2.247c0.093-2.03,1.316-2.938,2.914-3.51
        c0.3-0.108,0.612-0.187,0.923-0.256c2.5-0.555,4.93-1.344,7.224-2.469c2.792-1.37,5.543-2.83,8.268-4.329
        c2.241-1.233,4.562-1.794,7.129-1.482c2.697,0.327,4.362,2.809,3.448,5.334c-0.188,0.523-0.463,1.017-0.707,1.519
        c-2.003,4.092-3.637,8.322-4.689,12.76c-0.237,1-0.861,1.428-1.783,1.684c-1.069,0.297-2.036-0.125-3.095-0.34
        c-0.453,0.303-0.95,0.566-1.363,0.926c-1.442,1.26-2.899,2.504-4.265,3.842c-1.447,1.418-3.165,1.896-5.059,1.482
        c-0.96-0.211-1.825-0.854-2.907-1.387c-2.312,0.957-4.757,1.131-6.948-0.859C35.893,83.944,33.045,83.702,30.835,81.005z
         M52.091,74.009c2.577-0.914,4.953-2.223,6.999-4.054c1.069-0.956,2.034-2.026,3.072-3.017c0.501-0.479,0.817-0.397,1.618,0.354
        c-2.516,3.723-6.121,6.11-10.096,8.065c1.243,1.246,2.181,1.549,3.383,0.82c1.077-0.652,2.05-1.506,2.98-2.365
        c0.816-0.754,1.489-1.662,2.275-2.453c0.172-0.172,0.746-0.26,0.812-0.163c0.206,0.297,0.439,0.776,0.33,1.049
        c-0.232,0.574-0.633,1.102-1.042,1.582c-0.926,1.082-1.897,2.123-2.853,3.184c0.903,0.711,0.898,0.725,2.389,0.834
        c0.196-0.365,0.489-0.75,0.623-1.184c1.394-4.514,3.022-8.919,5.588-12.927c0.253-0.395,0.393-0.875,0.52-1.334
        c0.4-1.457-0.154-2.567-1.645-2.927c-1.553-0.376-3.172-0.5-4.696,0.159c-1.682,0.727-3.391,1.437-4.965,2.363
        c-2.829,1.664-5.775,3.057-8.81,4.279c-1.258,0.506-2.537,0.966-3.829,1.377c-0.996,0.317-1.942,0.675-2.69,1.473
        c0.34,1.451,1.42,1.95,2.647,1.993c2.126,0.075,4.197-0.076,6.292-0.812c3.508-1.232,6.669-2.973,9.573-5.248
        c0.18-0.141,0.42-0.226,0.646-0.278c0.135-0.031,0.372,0.005,0.43,0.096c0.113,0.181,0.257,0.528,0.177,0.618
        c-0.58,0.647-1.127,1.382-1.844,1.839c-2.554,1.626-5.103,3.295-8.075,4.096c-1.075,0.29-1.998,0.863-3.045,1.271
        C50.092,74.313,50.572,74.548,52.091,74.009z M24.532,77.942c-0.198,0.07-0.339,0.301-0.634,0.574
        c0.324,0.354,0.562,0.818,0.931,0.977c1.34,0.574,2.798,0.887,4.212,0.588c2.166-0.459,4.382-0.699,6.444-1.674
        c3.159-1.494,6.402-2.809,9.6-4.221c0.646-0.285,1.247-0.664,1.806-0.965c0.128-0.588-0.289-0.693-0.532-0.672
        c-1.886,0.158-3.631-0.211-5.238-1.39C35.735,73.864,30.151,75.948,24.532,77.942z M47.34,74.364
        c-1.532,0.715-3.106,1.449-4.68,2.186c-1.578,0.738-3.161,1.465-4.729,2.221c-1.532,0.74-3.364,0.848-4.747,2.141
        c0.633,0.898,1.437,1.084,2.329,1.137c1.309,0.078,2.529-0.336,3.71-0.764c2.313-0.84,4.556-1.859,6.632-3.211
        c0.53-0.344,1.108-0.611,1.654-0.932c0.671-0.395,1.332-0.805,2.188-1.324C48.721,75.216,48.057,74.806,47.34,74.364z
         M51.208,76.788c-1.247,0.695-2.475,1.43-3.733,2.102c-1.746,0.934-3.518,1.82-5.273,2.736c-0.336,0.176-0.652,0.387-0.938,0.559
        c0.005,0.697,0.514,0.752,0.826,0.73c0.854-0.061,1.747-0.115,2.538-0.408c2.134-0.791,6.32-3.355,8.476-5.064
        C52.546,76.626,51.975,76.36,51.208,76.788z M54.158,78.794c-1.699,1.184-3.457,2.279-5.185,3.418
        c-0.257,0.17-0.484,0.379-0.872,0.689c0.466,0.33,0.796,0.734,1.189,0.807c0.885,0.166,1.759-0.039,2.471-0.631
        c1.951-1.625,3.884-3.271,6.235-5.258C56.296,77.937,55.185,78.081,54.158,78.794z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M48.856,72.7c1.235,1.613,1.716,1.848,3.234,1.309
        c2.577-0.914,4.953-2.223,6.999-4.054c1.069-0.956,2.034-2.026,3.072-3.017c0.501-0.479,0.817-0.397,1.618,0.354
        c-2.516,3.723-6.121,6.11-10.096,8.065c1.243,1.246,2.181,1.549,3.383,0.82c1.077-0.652,2.05-1.506,2.98-2.365
        c0.816-0.754,1.489-1.662,2.275-2.453c0.172-0.172,0.746-0.26,0.812-0.163c0.206,0.297,0.439,0.776,0.33,1.049
        c-0.232,0.574-0.633,1.102-1.042,1.582c-0.926,1.082-1.897,2.123-2.853,3.184c0.903,0.711,0.898,0.725,2.389,0.834
        c0.196-0.365,0.489-0.75,0.623-1.184c1.394-4.514,3.022-8.919,5.588-12.927c0.253-0.395,0.393-0.875,0.52-1.334
        c0.4-1.457-0.154-2.567-1.645-2.927c-1.553-0.376-3.172-0.5-4.696,0.159c-1.682,0.727-3.391,1.437-4.965,2.363
        c-2.829,1.664-5.775,3.057-8.81,4.279c-1.258,0.506-2.537,0.966-3.829,1.377c-0.996,0.317-1.942,0.675-2.69,1.473
        c0.34,1.451,1.42,1.95,2.647,1.993c2.126,0.075,4.197-0.076,6.292-0.812c3.508-1.232,6.669-2.973,9.573-5.248
        c0.18-0.141,0.42-0.226,0.646-0.278c0.135-0.031,0.372,0.005,0.43,0.096c0.113,0.181,0.257,0.528,0.177,0.618
        c-0.58,0.647-1.127,1.382-1.844,1.839c-2.554,1.626-5.103,3.295-8.075,4.096C50.826,71.719,49.903,72.292,48.856,72.7z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M41.12,71.16c-5.385,2.705-10.969,4.789-16.588,6.783
        c-0.198,0.07-0.339,0.301-0.634,0.574c0.324,0.354,0.562,0.818,0.931,0.977c1.34,0.574,2.798,0.887,4.212,0.588
        c2.166-0.459,4.382-0.699,6.444-1.674c3.159-1.494,6.402-2.809,9.6-4.221c0.646-0.285,1.247-0.664,1.806-0.965
        c0.128-0.588-0.289-0.693-0.532-0.672C44.473,72.708,42.728,72.339,41.12,71.16z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M49.697,75.817c-0.977-0.602-1.641-1.012-2.357-1.453
        c-1.532,0.715-3.106,1.449-4.68,2.186c-1.578,0.738-3.161,1.465-4.729,2.221c-1.532,0.74-3.364,0.848-4.747,2.141
        c0.633,0.898,1.437,1.084,2.329,1.137c1.309,0.078,2.529-0.336,3.71-0.764c2.313-0.84,4.556-1.859,6.632-3.211
        c0.53-0.344,1.108-0.611,1.654-0.932C48.18,76.747,48.841,76.337,49.697,75.817z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M53.104,77.442c-0.558-0.816-1.129-1.082-1.896-0.654
        c-1.247,0.695-2.475,1.43-3.733,2.102c-1.746,0.934-3.518,1.82-5.273,2.736c-0.336,0.176-0.652,0.387-0.938,0.559
        c0.005,0.697,0.514,0.752,0.826,0.73c0.854-0.061,1.747-0.115,2.538-0.408C46.762,81.716,50.948,79.151,53.104,77.442z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M57.997,77.819c-1.701,0.117-2.812,0.262-3.839,0.975
        c-1.699,1.184-3.457,2.279-5.185,3.418c-0.257,0.17-0.484,0.379-0.872,0.689c0.466,0.33,0.796,0.734,1.189,0.807
        c0.885,0.166,1.759-0.039,2.471-0.631C53.713,81.452,55.646,79.806,57.997,77.819z"/>
</g>
</svg>

Answer 1

您可以使用 css3。像这样的东西:

svg {
  -webkit-animation:fly 1s linear infinite;
}

@-webkit-keyframes fly {
  50% {
    -webkit-transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}