Tricky CSS 定位动画

Question

我正在学习 CSS 动画，并正在尝试为使用相对和绝对定位的邮票制作动画。我想要动画：

从原始大小开始。
将尺寸扩大 2-3 倍并位于屏幕中央。
停顿2-3秒。
缩小到原来的大小和斑点。

我运行遇到的问题是将图章顶部的元素与转换发生时的位置保持在同一位置。如果可能，希望保持纯粹 CSS（*旁注我还没有添加任何 web-kit/browser 支持，因为我只是想让它先工作）。

代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 90vh;
  justify-content: flex-end;
  align-items: flex-start;
  background: grey;
}

.park-img {
  width: 10rem;
  height: 11.2rem;
  display: inline-block;
  margin-left: 2px;
  padding: 10px;
  background: white;
  position: relative;
  top: 2rem;
  left: -2rem;
  /*-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
    /*The stamp cutout will be created using crisp radial gradients*/
  background: radial-gradient( transparent 0px, transparent 4px, white 4px, white);
  /*reducing the gradient size*/
  background-size: 20px 20px;
  /*Offset to move the holes to the edge*/
  background-position: -10px -10px;
  /*Animation*/
  animation: stampAnimation 9s ease-in-out;
}

@keyframes stampAnimation {
  0% {}
  50% {
    transform: scale(3, 3) translate(-35%, 35%);
  }
  75% {
    transform: scale(3, 3) translate(-35%, 35%);
  }
}

.stampText {
  position: relative;
  top: -1rem;
  left: -1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fafafa;
  text-transform: uppercase;
  animation: stampAnimation 9s ease-in-out;
}

.park-name {
  font-weight: bold;
  text-align: center;
  font-size: 1rem;
}

.park-title {
  width: 90%;
  overflow: hidden;
  text-align: center;
  font-size: .5rem;
}

.park-title:before,
.park-title:after {
  background-color: #fafafa;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 10%;
}

.park-title:before {
  right: 0.5rem;
  margin-left: -50%;
}

.park-title:after {
  left: 0.5rem;
  margin-right: -50%;
}

<div class="park-stamp">
  <img src="https://res.cloudinary.com/saveallthethings/image/upload/v1614633821/daniel-burka-X_IwSPO2GH0-unsplash_zvoyst.jpg" class="park-img" />
  <div class="stampText">
    <div class="park-name">Zion</div>
    <div class="park-title">National Park</div>
  </div>
</div>

以及代码笔：

https://codepen.io/aspirationalhobbit/pen/GRNPqxw?editors=0100

Answer 1

我已经编辑了您的代码以进行与我最初的回答不同的更改。检查 https://codepen.io/udabasili/pen/VwmqmQK?editors=1100。基本上，我为您的元素的容器创建了一个 css 并将动画移动到那里。我还从您的动画中删除了翻译。检查codepen中的css以查看更改

.park-stamp{

    animation: stampAnimation 9s ease-in-out infinite;

}

Tricky CSS 定位动画

Tricky CSS Positioning Animation

css

animation

css-position