html5 - How make Wings in SVG move with css3 animations -

i have wings made in svg, , want apply fly effect in .wing class, if try, animation not occurs correctly.

animation in svg:

svg {    -webkit-animation:fly 1s linear infinite;  }    @-webkit-keyframes fly {    50% {      -webkit-transform: rotate(20deg);    }    100% {      -webkit-transform: rotate(0deg);    }  }

<?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>

animation in .wings:

.wings {    -webkit-animation:fly 1s linear infinite;  }    @-webkit-keyframes fly {    50% {      -webkit-transform: rotate(20deg);    }    100% {      -webkit-transform: rotate(0deg);    }  }

<?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>

why happening? how animation can change this, , how fix?

ty.

this happens because svg coordinate system not same css box model , there series of article on understanding svg coordinate systems , transformations (with links @ top other articles regarding rotations , animations) can take through of things considered when applying css directly svg.

it looks .wings css rotating wing around origin of (0,0) @ top left of image (i added red border svg element (in css) see what's happening in both cases)

but .svg applying transform whole viewbox of svg , doing around centre (midpoints) of viewbox.

.

so you're going need apply transform allow shift of origin.

so can either explicitly put origin , animation of wing svg file on each of "movable" items or load more 1 svg file , apply them whole , animate multiple moving parts separate files or work out transform-origin: need apply in css achieve same thing.