Creating dynamic animations with Keyframes in CSS

Question

Creating dynamic animations with Keyframes in CSS

Query

If we consider the illustration below:

A-------------B------------C

How can I begin an animation from the middle point (B), then have it move to A, return to B, and finally reach C? I attempted to create an example, but it is not functioning correctly.

Sample Code

.container {
  display: block;
}
.container .line {
  display: block;
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  display: block;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
}

@keyframes move {
  0% {
    left: 200px;
  }
  25%{
    left: 0px;
  }
  100%{
    left: 400px;
  }
}
.line:after {
  -webkit-animation: move 1s alternate infinite;
  -moz-animation: move 1s alternate infinite;
  -ms-animation: move 1s alternate infinite;
  -o-animation: move 1s alternate infinite;
  animation: move 1s alternate infinite;
}

<div class="container">
  <div class="line"></div>
</div>

html css

Answer 1

Answer №1

By trying this method, I believe it is functioning effectively.

Instead of using alternate, I opted for linear. This change resulted in a smoother animation.

.container {
  display: block;
}
.container .line {
  display: block;
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  display: block;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
}

@keyframes move {
  0% {
    left: 200px;
  }
  25%{
    left: 0px;
  }
  75%{
    left: 400px;
  }
  100%{
    left: 200px;
  }
}
.line:after {
  -webkit-animation: move linear 1s infinite;
  -moz-animation: move linear 1s infinite;
  -ms-animation: move linear 1s infinite;
  -o-animation: move linear 1s infinite;
  animation: move linear 1s infinite;
}

<div class="container">
  <div class="line"></div>
</div>

Answer 2

By trying this method, I believe it is functioning effectively.

Instead of using alternate, I opted for linear. This change resulted in a smoother animation.

.container {
  display: block;
}
.container .line {
  display: block;
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  display: block;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
}

@keyframes move {
  0% {
    left: 200px;
  }
  25%{
    left: 0px;
  }
  75%{
    left: 400px;
  }
  100%{
    left: 200px;
  }
}
.line:after {
  -webkit-animation: move linear 1s infinite;
  -moz-animation: move linear 1s infinite;
  -ms-animation: move linear 1s infinite;
  -o-animation: move linear 1s infinite;
  animation: move linear 1s infinite;
}

<div class="container">
  <div class="line"></div>
</div>

Answer 3

Answer №2

If you want to achieve this effect, consider adding the linear function instead of the default ease. Check out this example on Fiddle for a demonstration.

.wrapper .line {
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
  animation: move 3s infinite;
}

@keyframes move {
  0% {left: 200px;}
  25%{left: 0px;}
  50% {left: 200px;}
  75% {left: 400px;}
  100%{left: 200px;}
}

<div class="wrapper">
  <div class="line"></div>
</div>

Answer 4

If you want to achieve this effect, consider adding the linear function instead of the default ease. Check out this example on Fiddle for a demonstration.

.wrapper .line {
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
  animation: move 3s infinite;
}

@keyframes move {
  0% {left: 200px;}
  25%{left: 0px;}
  50% {left: 200px;}
  75% {left: 400px;}
  100%{left: 200px;}
}

<div class="wrapper">
  <div class="line"></div>
</div>

Creating dynamic animations with Keyframes in CSS

Query

Sample Code

Answer №1

Answer №2

Similar questions

Maximizing cell background color in HTML table with limited width fails to function properly

Having trouble getting PostCSS nesting to work with CSS variables in Tailwind CSS and Next.js?

Exploring the utilization of attributes with slots in Vue.js

The out directory is lacking Styled JSX integration for Next.js

When hovering, the <a> element does not fully encompass the background color

Reposition a Single Item on the Top Menu to the Right

Elevate the Appearance of Material UI Elements with custom CSS Sty

Material UI Grid List rows are displaying with an unusually large gap between them, creating a

Is there a way to send me the result of the radio input (Yes/No) via email?

Responsive height using Material Design Lite

Tips on adding to Jquery html code while maintaining the current CSS styling

What are some tactics for avoiding movement in the presence of a border setting?

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Displaying specific data points

Pausing JavaScript Execution Until the Completion of an Ajax Call

Strangely Bizarre CSS Quirk

The TextField component in MUIv5 is showing some frustrating white space in the corners

PHP Multiple Filter Options

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

The tab navigation feature is experiencing issues in Internet Explorer versions 7 and 8