ios 为什么同样的css动画有时会出现错误?

efzxgjgh  于 2022-12-24  发布在  iOS
关注(0)|答案(1)|浏览(167)

我使用css来动画化div的大小。我需要div从它的中心开始变大。
但是由于某种原因,在页面的某些地方,它工作正常,而在其他地方,它不工作,并且div从左上角开始增长。

为什么会发生这种情况?我该如何解决?

wfypjpf4

wfypjpf41#

试试这个!!
FlexBox文件:https://www.w3schools.com/css/css3_flexbox.asp

.circle {
  border-radius: 100%;
  display: flex;
  transition: all 2s;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.circle.red {
  background-color: red;
}

.circle.blue {
  background-color: blue;
}

.circle.out {
  width: 200px;
  height: 200px;
}

.circle.in {
  width: 0px;
  height: 0px;
}

.circle.animate {
  animation-name: bigger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes bigger {
  from {
    width: 0;
    height: 0;
  }

  to {
    width: 100%;
    height: 100%;
  }
}
<div class="circle out red">
  <div class="circle in blue animate"></div>
</div>

相关问题