如何缩放/调整css动画？答案

【问题标题】：How to scale/size a css animation?如何缩放/调整css动画？
【发布时间】：2017-05-16 04:26:04
【问题描述】：

不太了解如何使用 CSS 动画，但我发现了一些非常适合我的网站的东西。一个问题，就是太小了。任何人对我需要修改以扩大规模有什么建议吗？我实际上看到了在动画结束时在哪里增加尺寸/比例，这在比例属性中很明显。我不知道的是，在动画使其扩展之前控制大小。非常感谢你。 -威尔逊

例如： http://www.wilsonschlamme.com/animationtest.html

css:

.overlay-loader .loader-icon {
  position: absolute;
  top: 50%;
  left: 44%;
  color: #42f498;
}

.overlay-loader .loader-icon.spinning-cog {
  -webkit-animation: spinning-cog 1.3s infinite ease;
  -moz-animation: spinning-cog 1.3s infinite ease;
  -ms-animation: spinning-cog 1.3s infinite ease;
  -o-animation: spinning-cog 1.3s infinite ease;
  animation: spinning-cog 1.3s infinite ease;
  background-color: #42f498;
}

@-webkit-keyframes spinning-cog {
  0% { -webkit-transform: rotate(0deg) }
  20% { -webkit-transform: rotate(-45deg) }
  100% { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes spinning-cog {
  0% { -moz-transform: rotate(0deg) }
  20% { -moz-transform: rotate(-45deg) }
  100% { -moz-transform: rotate(360deg) }
}

@-o-keyframes spinning-cog {
  0% { -o-transform: rotate(0deg) }
  20% { -o-transform: rotate(-45deg) }
  100% { -o-transform: rotate(360deg) }
}

@keyframes spinning-cog {
  0% { transform: rotate(0deg) }
  20% { transform: rotate(-45deg) }
  100% { transform: rotate(360deg) }
}

@-webkit-keyframes shrinking-cog {
  0% { -webkit-transform: scale(2) }
  20% { -webkit-transform: scale(2.2) }
  100% { -webkit-transform: scale(1) }
}

@-moz-keyframes shrinking-cog {
  0% { -moz-transform: scale(2) }
  20% { -moz-transform: scale(2.2) }
  100% { -moz-transform: scale(1) }
}

@-o-keyframes shrinking-cog {
  0% { -o-transform: scale(2) }
  20% { -o-transform: scale(2.2) }
  100% { -o-transform: scale(1) }
}

@keyframes shrinking-cog {
  0% { transform: scale(2) }
  20% { transform: scale(2.2) }
  100% { transform: scale(0) }
}

.overlay-loader .loader-icon.shrinking-cog {
  -webkit-animation: shrinking-cog .3s 1 ease forwards;
  -moz-animation: shrinking-cog .3s 1 ease forwards;
  -ms-animation: shrinking-cog .3s 1 ease forwards;
  -o-animation: shrinking-cog .3s 1 ease forwards;
  animation: shrinking-cog .3s 1 ease forwards;
  background-color: #42f498;
}

【问题讨论】：

标签： css animation scale loader sizing

【解决方案1】：

如果您希望动画从一开始就变大，请为旋转齿轮动画添加比例。对所有前缀执行此操作（将 x 更改为您想要的比例）

@keyframes spinning-cog {
  0% { transform: rotate(0deg) scale(x)}
  20% { transform: rotate(-45deg) scale(x)}
  100% { transform: rotate(360deg) scale(x)}
}

【讨论】：