Wie kann ich eine Linie in einer CSS-Achterbahnanimation krümmen?

Ich versuche, mit CSS eine Animation im Achterbahnstil zu erstellen.

Ich möchte wissen, wie man den "Untersetzer" krümmt, wenn er sich in der Schleifenphase befindet.

Ich bin auf der Suche nach einer All-CSS-Lösung, aber wenn ein bisschen JavaScript benötigt wird, bin ich damit einverstanden.

Mein Code bisher:

#container {
  width: 200px;
  height: 300px;
  margin-top: 50px;
  position: relative;
  animation: 10s infinite loop;
  animation-timing-function: linear;
}

#coaster {
  width: 100px;
  height: 10px;
  background: lightblue;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
}

@keyframes loop {
  from {
    margin-left: -200px;
  }
  30% {
    margin-left: calc(50% - 75px);
    transform: rotate(0deg);
  }
  60% {
    margin-left: calc(50% - 125px);
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(-360deg);
    margin-left: 100%;
  }
}

<div id="container">
  <div id="coaster"></div>
</div>

Erweitern Sie das Snippet

— Matan Sanbira
quelle

Antworten:

Sie können überlegen border-radius. Hier ist ein grundlegendes Beispiel, das Sie verbessern können

Code-Snippet anzeigen

.box {
  height:100px;
  margin-top:50px;
  border:10px solid transparent;
  border-bottom:10px solid red;
  width:100px;
  animation:
    loop   5s infinite alternate linear,
    radius 5s infinite alternate linear;
}
@keyframes loop{
  0% {
    transform:translateX(0);
  }
  40% {
    transform:translateX(100px) rotate(0deg);
  }
  60% {
    transform:translateX(100px) rotate(-360deg); 
  }
  100% {
    transform:translateX(200px) rotate(-360deg);
  }
}
@keyframes radius{
   0%,28% {
     border-radius:0%
   }
   35%,38% {
     border-bottom-right-radius:50%;
     border-bottom-left-radius:0%;
   }
   45%,55% {
     border-radius:50%
   }
   62%,65% {
     border-bottom-right-radius:0%;
     border-bottom-left-radius:50%;
   }
   70%,100% {
     border-radius:0%
   }
}

<div class="box"></div>

Erweitern Sie das Snippet

Eine weitere verrückte Idee, bei der Sie eine rechteckige Form hinter einem transparenten, gekrümmten Pfad animieren können:

Code-Snippet anzeigen

.box {
  height: 165px;
  width: 315px;
  position: relative;
  border-radius: 0 100px 100px 0;
  animation: hide 3s infinite linear alternate;
  overflow:hidden;
}

.box:after {
  content: "";
  display:block;
  height: 100%;
  background: white padding-box;
  border-radius: inherit;
  border: 15px solid transparent;
  border-left:0;
  box-sizing: border-box;
}

.alt {
  margin-top: -165px;
  transform: scaleX(-1);
  transform-origin: 170px 0;
  animation-direction: alternate-reverse;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 90px;
  height: 90px;
  background: blue;
  bottom: -40px;
  animation: loop 3s infinite linear alternate;
  transform-origin: 50% -20px;
}

.alt:before {
  animation-direction: alternate-reverse;
}

@keyframes loop {
  15% {
    transform: translateX(180px) rotate(0deg);
  }
  40% {
    transform: translateX(180px) rotate(-180deg);
  }
  50%,100% {
    transform: translateX(125px) rotate(-180deg);
  }
}

@keyframes hide {
  0%,50% {
    visibility: visible;
  }
  50.2%,100% {
    visibility: hidden;
  }
}

<div class="box"></div>

<div class="box alt"></div>

Erweitern Sie das Snippet

Eine optimierte Version mit weniger Code und Transparenz (wird dies berücksichtigen mask)

Code-Snippet anzeigen

.box {
  height: 165px;
  width: 315px;
  position: relative;
  border-radius: 0 100px 100px 0;
  animation: hide 3s infinite linear alternate;
  overflow:hidden;
  -webkit-mask:
    linear-gradient(#fff,#fff) top left   /235px 15px,
    linear-gradient(#fff,#fff) bottom left/235px 15px,
    radial-gradient(farthest-side at left,transparent calc(100% - 15px),#fff 0) right/100px 100%;
   -webkit-mask-repeat:no-repeat;
   mask:
    linear-gradient(#fff,#fff) top    left/235px 15px,
    linear-gradient(#fff,#fff) bottom left/235px 15px,
    radial-gradient(farthest-side at left,transparent calc(100% - 15px),#fff 0) right/100px 100%;
   mask-repeat:no-repeat;  
}
.alt {
  margin-top: -165px;
  transform: scaleX(-1);
  transform-origin: 170px 0;
  animation-direction: alternate-reverse;
}

.box:before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  background: blue;
  bottom: -40px;
  animation: loop 3s infinite linear alternate;
  transform-origin: 50% -20px;
}

.alt:before {
  animation-direction: alternate-reverse;
}

@keyframes loop {
  15% {
    transform: translateX(180px) rotate(0deg);
  }
  40% {
    transform: translateX(180px) rotate(-180deg);
  }
  50%,100% {
    transform: translateX(125px) rotate(-180deg);
  }
}

@keyframes hide {
  0%,50% {
    visibility: visible;
  }
  50.2%,100% {
    visibility: hidden;
  }
}

body {
  background:linear-gradient(to right,yellow,gray);
}

<div class="box"></div>

<div class="box alt"></div>

Erweitern Sie das Snippet

Eine andere Version mit weniger Pixelwerten und CSS-Variablen, in der Sie einfach alles anpassen können.

Führen Sie das Snippet auf einer ganzen Seite aus und haben Sie Spaß mit allen Untersetzern!

.box {
  --w:400px; /* Total width of the coaster */
  --h:180px; /* Height of the coaster */
  --b:90px;  /* width of the small bar */
  --t:15px;  /* height of the small bar */
  --c:blue;  /* Color of the small bar */
  
  width:var(--w);
  height:var(--h);
}

.box > div {
  height: 100%;
  position:relative;
  width: calc(50% + var(--h)/2 + var(--b)/2);
  border-radius: 0 1000px 1000px 0;
  animation: hide 3s infinite linear alternate;
  -webkit-mask:
    linear-gradient(#fff,#fff) top left   /calc(100% - var(--h)/2) var(--t),
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   -webkit-mask-repeat:no-repeat; 
   mask:
    linear-gradient(#fff,#fff) top left   /calc(100% - var(--h)/2) var(--t),
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   mask-repeat:no-repeat;
}
.box > div:last-child {
  margin-top:calc(-1*var(--h));
  margin-left:auto;
  transform: scaleX(-1);
  animation-direction: alternate-reverse;
}

.box > div:before {
  content: "";
  position: absolute;
  width: var(--b);
  height: 50%;
  background: var(--c);
  bottom: -25%;
  animation: loop 3s infinite linear alternate;
  transform-origin: 50% -50%;
}

.box > div:last-child:before {
  animation-direction: alternate-reverse;
}

@keyframes loop {
  15% {
    transform: translateX(calc(var(--w)/2)) rotate(0deg);
  }
  40% {
    transform: translateX(calc(var(--w)/2)) rotate(-180deg);
  }
  50%,100% {
    transform: translateX(calc(var(--w)/2 - var(--b)/2)) rotate(-180deg);
  }
}

@keyframes hide {
  50% {
    visibility: visible;
  }
  50.1%,100% {
    visibility: hidden;
  }
}

body {
  background:linear-gradient(to right,yellow,gray);
}

<div class="box">
<div></div><div></div>
</div>

<div class="box" style="--w:500px;--h:80px;--b:50px;--c:red;--t:5px">
<div></div><div></div>
</div>

<div class="box" style="--w:90vw;--h:200px;--b:100px;--c:purple;--t:20px">
<div></div><div></div>
</div>

Erweitern Sie das Snippet

Um den Trick zu verstehen, entfernen wir die Maske, ersetzen sie durch einen einfachen Farbverlauf und entfernen die ausgeblendete Animation:

Code-Snippet anzeigen

.box {
  --w:400px; /* Total width of the coaster */
  --h:180px; /* Height of the coaster */
  --b:90px;  /* width of the small bar */
  --t:15px;  /* height of the small bar */
  --c:blue;  /* Color of the small bar */
  
  width:var(--w);
  height:var(--h);
}

.box > div {
  height: 100%;
  position:relative;
  width: calc(50% + var(--h)/2 + var(--b)/2);
  border-radius: 0 1000px 1000px 0;
  /*animation: hide 3s infinite linear alternate;*/
  background:
    linear-gradient(red,red) top left   /calc(100% - var(--h)/2) var(--t),
    linear-gradient(green,green) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),black 0) right/calc(var(--h)/2) 100%;
  background-repeat:no-repeat; 
}
.box > div:last-child {
  margin-top:calc(-1*var(--h));
  margin-left:auto;
  transform: scaleX(-1);
  animation-direction: alternate-reverse;
}

.box > div:before {
  content: "";
  position: absolute;
  width: var(--b);
  height: 50%;
  background: var(--c);
  bottom: -25%;
  animation: loop 3s infinite linear alternate;
  transform-origin: 50% -50%;
}

.box > div:last-child:before {
  animation-direction: alternate-reverse;
  background:purple;
}

@keyframes loop {
  15% {
    transform: translateX(calc(var(--w)/2)) rotate(0deg);
  }
  40% {
    transform: translateX(calc(var(--w)/2)) rotate(-180deg);
  }
  50%,100% {
    transform: translateX(calc(var(--w)/2 - var(--b)/2)) rotate(-180deg);
  }
}

@keyframes hide {
  0%,50% {
    visibility: visible;
  }
  50.2%,100% {
    visibility: hidden;
  }
}

body {
  background:linear-gradient(to right,yellow,gray);
}

<div class="box">
<div></div><div></div>
</div>

Erweitern Sie das Snippet

Der durch den Farbverlauf erzeugte Pfad ist unsere Maske und wir werden nur diesen Teil sehen. Dann machen wir unser Rechteck so, dass es dem Pfad folgt, und der Trick besteht darin, zwei symmetrische Elemente zu haben, um den Schleifeneffekt zu erzeugen. Die Haut Animation ermöglicht es uns , nur einer von ihnen zu sehen und die perfekte Überlappung wird eine kontinuierliche Animation erstellen.

Hier ist eine Version für den Fall, dass Sie einen Kreis für den Untersetzer möchten

.box {
  --w:400px; /* Total width of the coaster */
  --h:180px; /* Height of the coaster */
  --b:90px;  /* width of the small bar */
  --t:15px;  /* height of the small bar */
  --c:blue;  /* Color of the small bar */
  
  width:var(--w);
  height:var(--h);
}

.box > div {
  height: 100%;
  position:relative;
  width: calc(50% + var(--h)/2);
  border-radius: 0 1000px 1000px 0;
  animation: hide 3s infinite linear alternate;
  -webkit-mask:
    radial-gradient(farthest-side at bottom right,transparent calc(100% - var(--t)),#fff 0 100%,transparent 100%) top 0 right calc(var(--h)/2)/calc(var(--h)/2) 50%,
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   -webkit-mask-repeat:no-repeat; 
   mask:
    radial-gradient(farthest-side at bottom right,transparent calc(100% - var(--t)),#fff 0 100%,transparent 100%) top 0 right calc(var(--h)/2)/calc(var(--h)/2) 50%,
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   mask-repeat:no-repeat;
}
.box > div:last-child {
  margin-top:calc(-1*var(--h));
  margin-left:auto;
  transform: scaleX(-1);
  animation-direction: alternate-reverse;
}

.box > div:before {
  content: "";
  position: absolute;
  width: var(--b);
  height: 50%;
  background: var(--c);
  bottom: -25%;
  animation: loop 3s infinite linear alternate;
  transform-origin: 50% -50%;
}

.box > div:last-child:before {
  animation-direction: alternate-reverse;
}

@keyframes loop {
  15% {
    transform: translateX(calc(var(--w)/2 - var(--b)/2)) rotate(0deg);
  }
  50%,100% {
    transform: translateX(calc(var(--w)/2 - var(--b)/2)) rotate(-180deg);
  }
}

@keyframes hide {
  50% {
    visibility: visible;
  }
  50.1%,100% {
    visibility: hidden;
  }
}

body {
  background:linear-gradient(to right,yellow,gray);
}

<div class="box">
<div></div><div></div>
</div>

<div class="box" style="--w:500px;--h:80px;--b:50px;--c:red;--t:5px">
<div></div><div></div>
</div>

<div class="box" style="--w:90vw;--h:200px;--b:100px;--c:purple;--t:20px">
<div></div><div></div>
</div>

Erweitern Sie das Snippet

— Temani Afif
quelle

Ich danke Ihnen allen und besonders Temani Afif für Ihre Inspiration:]

Ich habe schließlich viele Ihrer Antworten mit border-radiusversteckten Elementen und etwas mehr HTML kombiniert. Ich denke, ich habe eine großartige Lösung für die Animation erstellt.

* {
  box-sizing: border-box;
}

#container {
  width: 100px;
  height: 100px;
  margin-top: 50px;
  position: relative;
  animation: 5s infinite loop linear;
}

#coasterLine {
  height: 10px;
  background: lightblue;
  position: absolute;
  z-index: 20;
  bottom: 0;
  animation: 5s infinite c-line linear;
}

#coasterRound {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: solid transparent 10px;
  border-bottom: solid lightblue 10px;
  position: relative;
  animation: 5s infinite c-round linear;
}

#whiteScreen {
  width: 100%;
  background: white;
  position: absolute;
  z-index: 10;
  top: 0;
  animation: 5s infinite white-screen linear;
}

@keyframes loop {
  0% {
    margin-left: -200px;
  }
  38%,
  43% {
    margin-left: calc(50% - 50px);
  }
  58%,
  63% {
    margin-left: calc(50% - 50px);
  }
  100% {
    margin-left: 100%;
  }
}

@keyframes c-round {
  0%,
  43% {
    transform: rotate(-45deg);
  }
  58%,
  100% {
    transform: rotate(-315deg);
  }
}

@keyframes c-line {
  0%,
  38% {
    left: 0;
    width: 60px;
  }
  43% {
    left: 50px;
    width: 0;
  }
  58% {
    left: 40px;
    width: 0;
  }
  63%,
  100% {
    left: 40px;
    width: 60px;
  }
}

@keyframes white-screen {
  0%,
  38% {
    height: 100%;
    transform: rotate(0deg);
  }
  43% {
    height: 50%;
    transform: rotate(0deg);
  }
  44%,
  57% {
    height: 0;
    transform: rotate(0deg);
  }
  58% {
    height: 50%;
    transform: rotate(180deg);
  }
  63%,
  100% {
    height: 100%;
    transform: rotate(180deg);
  }
}

<div id="container">
  <div id="coasterLine"></div>
  <div id="coasterRound"></div>
  <div id="whiteScreen"></div>
</div>

Erweitern Sie das Snippet

es war großartig!

— Matan Sanbira
quelle

Sieht nicht wirklich natürlich aus, border-radiusscheint aber ein guter Anfang zu sein:

#container {
  width: 200px;
  height: 300px;
  margin-top: 50px;
  position: relative;
  animation: 10s infinite loop;
  animation-timing-function: linear;
}

#coaster {
  width: 100px;
  height: 10px;
  background: lightblue;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
  animation: 10s infinite coasterAnimation;
}

@keyframes loop {
  from {
    margin-left: -200px;
  }

  30% {
    margin-left: calc(50% - 75px);
    transform: rotate(0deg);
  }

  60% {
    margin-left: calc(50% - 125px);
    transform: rotate(-360deg);
  }

  to {
    transform: rotate(-360deg);
    margin-left: 100%;
  }
}

@keyframes coasterAnimation {

  29% {
    border-radius: 0;
  }

  30% {
    border-radius: 0 0 50% 50%;
  }

  59% {
    border-radius: 0 0 50% 50%;
  }

  60% {
    border-radius: 0;
  }

  70% {
    border-radius: 0;
  }
}

<div id="container">
  <div id="coaster"></div>
</div>

Erweitern Sie das Snippet

— Johannchopin
quelle

Ich denke, der folgende Ansatz ist mehr oder weniger solide (obwohl ich als erster zustimmen würde, dass diese eilige Implementierung nicht perfekt ist).

Anstatt dass die Achterbahn durch a dargestellt wird <div>, wird sie durch border-bottoma dargestellt<div> .

In der eigenen simultanen Animation dieser Grenze werden die border-bottom-left-radiusund die border-bottom-left-radiusBiegung im 50%Laufe der Zeit vorgenommen, bevor sie zurückgebogen werden0 .

Arbeitsbeispiel:

#container {
  width: 180px;
  height: 180px;
  position: relative;
  animation: 10s loop-container linear infinite;
}

#coaster {
  width: 180px;
  height: 180px;
  border-bottom: 10px solid lightblue;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
  animation: 10s loop-coaster linear infinite;
}

@keyframes loop-container {
  0% {
    margin-left: -200px;
  }
  30% {
    margin-left: calc(50% - 75px);
    transform: rotate(0deg);
  }
  60% {
    margin-left: calc(50% - 125px);
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
    margin-left: 100%;
  }
}

@keyframes loop-coaster {
  30% {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  31% {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 25%;
  }
  35%, 55% {
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  59% {
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 0;
  }
  60% {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

<div id="container">
  <div id="coaster"></div>
</div>

Erweitern Sie das Snippet

— Rounin
quelle