不太了解如何使用 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;
}
最佳答案
如果您希望它从动画开始时就变大,请为旋转齿轮动画添加比例。对所有前缀执行此操作(将 x 更改为您想要的比例)
@keyframes spinning-cog {
0% { transform: rotate(0deg) scale(x)}
20% { transform: rotate(-45deg) scale(x)}
100% { transform: rotate(360deg) scale(x)}
}
关于css - 如何缩放/调整 css 动画的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43992491/