Question

我在SVG文件上做了一些简单的CSS动画，但动画似乎加速并减速。为什么动画没有一致的速度？

#cs-cloud .gear {
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block;
}
#cs-cloud .gear-small {
    fill: tan;
    animation-name: rotate-clockwise;
    animation-duration: 5s;
}
@keyframes rotate-clockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Here's a fiddle

Answer 1

在animation-timing-function: linear;

中尝试.gear

＆＃13;

#cs-cloud .gear {
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  display: inline-block;
  animation-timing-function: linear;
}
#cs-cloud .gear-small {
  fill: tan;
  animation-name: rotate-clockwise;
  animation-duration: 5s;
}
#cs-cloud .gear-medium {
  fill: green;
  animation-name: rotate-counter-clockwise;
  animation-duration: 10s;
}
#cs-cloud .gear-large {
  fill: pink;
  animation-name: rotate-clockwise;
  animation-duration: 15s;
}
#cs-cloud .cloud {
  fill: blue
}
@keyframes rotate-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-counter-clockwise {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

＆＃13;

<svg version="1.1" id="cs-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
  <path class="gear gear-small" d="M189.905,120.377l2.77,4.017c2.154-0.746,4.127-1.77,5.924-2.997l-1.609-5.298l4.286-3.87l4.722,1.312
	c1.127-1.912,2.002-3.94,2.61-6.092l-4.654-3.03l0.775-5.717l4.467-2.014c-0.184-1.06-0.429-2.111-0.75-3.173
	c-0.323-1.09-0.725-2.137-1.184-3.133l-5.529,0.636l-3.078-4.878l2.109-4.392c-1.699-1.45-3.56-2.663-5.548-3.62l-3.817,4.05
	l-5.511-1.777l-1.228-4.721c-2.172-0.021-4.395,0.24-6.58,0.805l-0.306,5.525l-5.387,2.186l-3.978-2.832
	c-1.722,1.397-3.238,3.033-4.521,4.816l3.333,4.439l-2.703,5.101l-4.896,0.384c-0.388,2.129-0.534,4.36-0.356,6.588l5.431,1.266
	l1.213,5.642l-3.493,3.391c1.092,1.974,2.448,3.737,3.99,5.3l4.966-2.498l4.57,3.55l-0.473,4.843
	c2.062,0.766,4.227,1.283,6.45,1.495l2.205-5.102l5.776-0.204v0.002L189.905,120.377z M173.69,103.873
	c-1.834-6.056,1.603-12.435,7.689-14.265c6.061-1.819,12.477,1.603,14.311,7.66c1.836,6.038-1.61,12.428-7.671,14.253
	c-6.095,1.827-12.497-1.6-14.329-7.652v0.002V103.873z" />
  <path class="gear gear-medium" d="M196.347,178.849l3.16,4.568c2.465-0.851,4.716-2.008,6.76-3.403l-1.832-6.06l4.878-4.404l5.382,1.503
	c1.281-2.175,2.295-4.494,2.97-6.942l-5.302-3.457l0.89-6.521l5.09-2.287c-0.206-1.216-0.481-2.416-0.854-3.632
	c-0.37-1.233-0.827-2.424-1.353-3.562l-6.31,0.736l-3.5-5.57l2.394-5.003c-1.92-1.646-4.034-3.036-6.31-4.127l-4.358,4.61
	l-6.286-2.02l-1.394-5.388c-2.48-0.022-5.005,0.286-7.494,0.926l-0.354,6.296l-6.136,2.494l-4.535-3.229
	c-1.97,1.597-3.697,3.452-5.159,5.49l3.81,5.05l-3.1,5.82l-5.57,0.435c-0.442,2.443-0.61,4.977-0.404,7.513l6.187,1.45l1.39,6.427
	l-3.988,3.873c1.248,2.232,2.792,4.246,4.544,6.03l5.667-2.846l5.207,4.036l-0.532,5.529c2.346,0.88,4.819,1.456,7.352,1.705
	l2.514-5.808l6.58-0.229l-0.003-0.004L196.347,178.849z M177.857,160.029c-2.083-6.894,1.826-14.176,8.772-16.25
	c6.912-2.085,14.23,1.815,16.314,8.714c2.092,6.904-1.832,14.174-8.747,16.265c-6.94,2.074-14.247-1.826-16.338-8.73h-0.002V160.029
	z" />
  <path class="gear gear-large" d="M128.26,186.003l5.195,7.554c4.02-1.393,7.77-3.297,11.126-5.597l-3.03-10.019l8.09-7.247l8.858,2.451
	c2.133-3.56,3.77-7.396,4.896-11.415l-8.752-5.717l1.485-10.729l8.367-3.788c-0.33-2.002-0.775-3.997-1.382-5.993
	c-0.612-2.036-1.37-3.99-2.24-5.887l-10.397,1.229l-5.772-9.192l3.964-8.248c-3.178-2.71-6.674-5.008-10.444-6.801l-7.181,7.628
	l-10.36-3.347l-2.287-8.88c-4.095-0.044-8.248,0.44-12.381,1.51l-0.59,10.41l-10.097,4.068l-7.479-5.336
	c-3.259,2.659-6.111,5.71-8.525,9.077l6.279,8.357l-5.09,9.567l-9.185,0.708c-0.778,4.042-1.022,8.189-0.677,12.41l10.201,2.376
	l2.277,10.6l-6.574,6.408c2.072,3.688,4.594,7.01,7.486,9.935l9.368-4.704l8.584,6.66l-0.899,9.123
	c3.875,1.446,7.959,2.413,12.157,2.824l4.133-9.592l10.878-0.407L128.26,186.003z M97.736,155.005
	c-3.442-11.38,3.02-23.378,14.455-26.805c11.429-3.44,23.479,3,26.928,14.375c3.445,11.372-3.018,23.377-14.446,26.81
	C113.238,172.817,101.186,166.377,97.736,155.005h-0.002H97.736z" />
  <path class="cloud" d="M226.957,78.327c0-0.723,0.127-1.455,0.127-2.189c0-39.068-32.087-71.215-70.977-71.215
	c-28.018,0-52.135,16.96-63.438,40.712c-4.927-2.483-10.39-3.883-16.285-3.883c-17.985,0-32.87,14.394-35.792,31.592
	c-21.384,7.416-36.814,26.858-36.814,50.92c0,30.266,24.361,55.657,54.441,55.657H77.27l-4.522-9.73H58.7
	c-24.853,0-45.08-21.202-45.08-46.237c0-19.386,12.271-35.478,30.504-41.804l5.104-1.817l0.91-5.358
	C52.323,61.849,63.559,51.1,76.807,51.1c4.194,0,8.332,0.97,12.094,2.917l8.209,4.129l3.94-8.322
	c10.091-21.202,31.667-35.363,54.938-35.363c33.603,0,61.312,26.798,61.312,60.58c0,8.086-0.122,12.337-0.122,12.337l9.234,0.056
	c22.302,0.311,39.854,18.525,39.854,40.966c0,22.41-18.103,41.428-40.402,41.547l-1.943,0.243h-6.103
	c-1.309,2.293-3.506,5.771-6.678,9.73h15.033C253.52,179.923,276,156.289,276,128.692c0.002-27.699-21.513-50.299-49.04-50.365
	H226.957z" />
</svg>

＆＃13;

SVG CSS动画不一致

1 个答案: