尝试同时运行两个动画,但似乎只能放大或缩小动画,而不能旋转动画。谁能帮忙吗?
这是代码
.container {
margin: 50px;
}
.animation {
width: 40px;
height: 40px;
border: 1px solid black;
background-color: red;
animation: spin 5s, zoomInZoomOut 2s;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes zoomInZoomOut {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
<div class="container">
<div class="animation"></div>
</div>
你需要使用animation
的.container
是能够显示spin
和zoomIn
和zoomOut
。
另外,您需要设置position: absolute
在容器上,以使其在旋转时不会移动。
演示:
.container {
margin: 50px;
position: absolute;
animation: zoomInZoomOut 5s infinite;
}
.animation {
width: 40px;
height: 40px;
border: 1px solid black;
background-color: red;
animation: spin 5s;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes zoomInZoomOut {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
<div class="container">
<div class="animation"></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句