将元素从视图中心动画到其原始位置 [英] animate element from center of view to its original position

问题描述

我想创建一个动画来将元素从当前视图的中心移动到原始位置.

但是 CSS 动画不支持切换 display 属性，所以你会看到第二个矩形没有从下图中的中心移动(实际上是用 <代码>位置:绝对).

是否有任何纯 CSS 解决方案来实现目标?任何建议表示赞赏.

以下是我目前尝试过的:

.instruction-target {位置:相对；}.highlight-box {宽度:100px；高度:20px；字体粗细:粗体；字体大小:2em；边框:实心 5px 红色；显示:内联块；}.float-highlight-box {位置:绝对；顶部:0；左:0；动画名称:移动到目标；动画持续时间:3s；不透明度:0；}@keyframes 移动到目标 {/* 动画自:当前视图的中心 */从 {顶部:50vh；左:50vw；位置:固定；不透明度:1；}/* 动画到:它的原始位置 */到 {顶部:0px；左:0px；//位置:绝对；不透明度:0；}}

<a style="position:fixed;top: 50vh; left: 50vw;">CENTER</a><button class="instruction-target">测试1<span class="highlight-box float-highlight-box"></span><button class="instruction-target" style="margin-left: 400px">测试2<span class="highlight-box float-highlight-box"></span>

解决方案

使用纯 CSS 可以做到这一点，但必须使用 CSS variables 属性.

<块引用>

这里我保存了一个工作示例..

我还在下面添加了一个有效的代码片段，以便您可以对其进行测试.

:root {--目标偏移量:0px；}.目标偏移{--target-offset: 400px;}.固定中心{位置:固定；顶部:50%；左:50%；变换:翻译(-50%，-50%)；}.指令目标{位置:相对；}.highlight-box {宽度:100px；高度:20px；字体粗细:粗体；字体大小:2em；边框:实心 5px 红色；显示:内联块；}.float-highlight-box {位置:固定；顶部:0；左:var(--target-offset);动画名称:移动到目标；动画持续时间:3s；不透明度:1；}@keyframes 移动到目标 {/* 动画自:当前视图的中心 */从 {顶部:50%；左:50%；变换:翻译(-50%，-50%)；位置:固定；不透明度:1；}/* 动画到:它的原始位置 */到 {顶部:0px；左:var(--target-offset);不透明度:0；}}

<a class="fixed-center">CENTER</a><button class="instruction-target">测试1<span class="highlight-box float-highlight-box"></span><button class="instruction-target target-offset" style="margin-left: var(--target-offset)">测试2<span class="highlight-box float-highlight-box"></span>

I'd like to create one animation to move the elements from the center of current view to the original positions.

But CSS animation doesn't support toggling display property, so you will see the second rectangle doesn't move from the center in below picture (actually animated with position:absolute).

Is there any Pure CSS solution to reach the goal? Any suggestion is appreciated.

Below is what I tried so far:

.instruction-target {
  position: relative;
}
.highlight-box {
  width: 100px;
  height: 20px;
  font-weight: bold;
  font-size: 2em;
  border: solid 5px red;
  display: inline-block;
}

.float-highlight-box {
  position: absolute;
  top: 0; 
  left: 0;
  animation-name: moving-to-target;
  animation-duration: 3s;
  opacity: 0;
}

@keyframes moving-to-target {
  /* animate from: center of current view */
  from {
    top: 50vh;
    left: 50vw;
    position: fixed;
    opacity: 1;
  }
  /* animate to: its original position */
  to {
    top: 0px; 
    left: 0px; 
    //position: absolute; 
    opacity: 0;
  }
}

<div style="width: 100%; min-height: 400px;border: solid 1px blue">
  <a style="position:fixed;top: 50vh; left: 50vw;">CENTER</a>
  <button class="instruction-target">
    Test1
    <span class="highlight-box float-highlight-box"></span>
  </button>
  <button class="instruction-target" style="margin-left: 400px">
    Test2
    <span class="highlight-box float-highlight-box"></span>
  </button>
</div>

解决方案

It is possible to do this with pure CSS, but it is necessary to use the CSS variables property.

Here I have saved a working example..

I am also adding a working snippet of code below so you can test it.

:root {
  --target-offset: 0px;
}

.target-offset {
  --target-offset: 400px;
}

.fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.instruction-target {
  position: relative;
}
.highlight-box {
  width: 100px;
  height: 20px;
  font-weight: bold;
  font-size: 2em;
  border: solid 5px red;
  display: inline-block;
}

.float-highlight-box {
  position: fixed;
  top: 0;
  left: var(--target-offset);
  animation-name: moving-to-target;
  animation-duration: 3s;
  opacity: 1;
}

@keyframes moving-to-target {
  /* animate from: center of current view */
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    opacity: 1;
  }
  /* animate to: its original position */
  to {
    top: 0px;
    left: var(--target-offset);
    opacity: 0;
  }
}

<div style="width: 100%; min-height: 400px;border: solid 1px blue">
  <a class="fixed-center">CENTER</a>
  <button class="instruction-target">
    Test1
    <span class="highlight-box float-highlight-box"></span>
  </button>
  <button class="instruction-target target-offset" style="margin-left: var(--target-offset)">
    Test2
    <span class="highlight-box float-highlight-box"></span>
  </button>
</div>

这篇关于将元素从视图中心动画到其原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！