Je voudrais créer une animation pour déplacer les éléments du centre de la vue actuelle vers les positions d'origine.

Mais l'animation CSS ne prend pas en charge le basculement de la propriété display, vous verrez donc que le deuxième rectangle ne bouge pas du centre dans l'image ci-dessous (en fait animé avec position:absolute).

Existe-t-il une solution Pure CSS pour atteindre l'objectif? Toute suggestion est appréciée.

enter image description here

Voici ce que j'ai essayé jusqu'à présent:

.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>
1
Sphinx 26 févr. 2021 à 22:22

1 réponse

Meilleure réponse

Il est possible de le faire avec du CSS pur, mais il est nécessaire d'utiliser la propriété des variables CSS.

Ici, j'ai enregistré un exemple de travail..

J'ajoute également un extrait de code fonctionnel ci-dessous afin que vous puissiez le tester.

: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>
0
BOZ 26 févr. 2021 à 20:49