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>

htmlcss

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unresolved styles in React component linked to styles.css file

As I dive into creating a registration page in ReactJS, I encounter a frustrating issue with my styles not applying correctly from the styles.css file. Let's take a look at my RegisterPage.jsx component: export default function RegisterPage() { ret ...

javascripthtmlcssreactjs

What is the best way to set the width of an iframe within a <td> element to be 33% of the screen?

I am facing an issue with scaling an iframe dynamically inside a <td> element. My goal is to make the iframe occupy 33% of the screen width while automatically adjusting its height. Here is what I have tried: <iframe src="google drive presentati ...

htmlcssiframe

What is the best way to allow wider list items to overflow their absolutely positioned container?

My challenge involves a list that is dynamically populated, and I require it to be wider than its absolutely-positioned parent (specifically a custom <select> element implementation). #wrapper { position: relative; border: 1px ...

htmlcssinternet-explorer-11

Disable the click event using jQuery

$("button").click(function (){ $("<button>Start</button>).appendTo('main'); }); The code above introduces a functionality where clicking a button generates another button dynamically. However, each subsequent click kee ...

javascripthtmljqueryclick

The Typewriter Effect does not appear alongside the heading

For my portfolio website, I am using React to create a unique typewriter effect showcasing some of my hobbies. Currently, the code is set up like this: "I like to" [hobbies] However, I want it to display like this: "I like to" [h ...

javascripthtmlcssreactjs

What is the method for compressing text in CSS?

I'm curious about how to condense my text so it doesn't extend beyond the page. Any ideas on how to achieve this? Issue: Solution: .Subheading{ text-align:center; font-family: 'Mukta', sans-serif; margin-top:70px; m ...

htmlcsstext

Problem with the appearance of the drop-down menu

After a few dedicated weeks on a Web application project, I am currently tackling the challenge of a drop-down menu. Despite its functionality, there are two specific points I need help with: When expanding the menu by selecting a main item, I want to pr ...

jqueryhtmlcss

Tips for managing callbacks from a RESTful service API on IOS

Utilizing an API to enable users to register an account on my application. Currently, I have managed to craft the necessary URL in objective-C to submit the data, with the API documentation detailing the return codes that will indicate the outcome. My qu ...

htmlobjective-ciosapisubmit

Display additional information upon hovering without disrupting the neighboring elements

When I hover over a component, I want to display more details and scale it up. However, this action ends up displacing the surrounding components. Take a look at the screenshot for reference: Below is the code snippet where I defined the styling for an MU ...

cssreactjsnext.jsmaterial-ui

Make sure the div is always positioned above everything, including any built-in pop-up windows

When working with two forms, one for user input and the other as a pop-up window to display results, users sometimes close the pop-up window prematurely if they think there is a network issue causing a delay in data execution. To prevent this, I am consi ...

javascriptjqueryhtmlcss

Preserving the HTML tag structure in lxml - What is the best method?

Here is a url link that I have: I am attempting to extract the main body content of this news page using LXML with xpath: //article, however it seems to include content beyond the body tag As LXML modifies the HTML structure upon initialization, I am see ...

pythonhtmlxml

The color of the button in HTML5 will remain constant and not shift

I have several buttons that function like radio buttons - only one can be selected at a time: <button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button> <button id="btn-silver" name="btn-silver" type="butt ...

javascriptjqueryhtmlcss

Tips for changing the color and incorporating text into an image

Hey there! I'm interested in creating a website where users can select colors like blue, white, and black without the page reloading. Once a color is selected, users should have the option to add text on top of the color image, as well as the option t ...

cssajaxjquery-ui

What methods can I use to customize the appearance of the acceptance label in a contact form created with

I am currently developing a WordPress website using the Contact Form 7 plugin. However, I am facing an issue with styling the "I accept" button and text when clicking on the "registrace" button. I would like to center them and create some proper margin aro ...

htmlcsswordpresscontact-form-7

What could be causing the failure of this web component using shadow DOM when the HTML code includes multiple instances of the component?

Recently, a question was raised on this platform regarding the use of Selenium to access the shadow DOM. Curious about this topic, I delved into the MDN article Using shadow DOM and decided to replicate the code on my local machine. Surprisingly, it worked ...

javascripthtmlcssweb-componentshadow-dom

Retrieve the hidden value buried within multiple layers of classes

I'm having trouble retrieving the value from the pickup-address class. Here is my current code. Can anyone help me identify where I might be going wrong? JS var pickupAddress = $('.timeline-item.active-item > .timeline-status > .pickup-add ...

javascriptjquerycss

Guide on replacing the character "&" in PHP with ease

I am encountering an issue where some output on the page contains a space character written as "&nbsp;". I need to replace it back with a regular space. I attempted using str_replace("&nbsp"," ",$mystr) and even preg_replace("/(&nbsp;)/", " ", ...

phphtmlregex

Adjust images, documents, and videos to fit seamlessly within an iFrame

I am currently working on an MVC project with a View named Index.cshtml. Within this view, I have a dynamically created iFrame where the HTML content is generated in a string and then appended to a div using .html(). The content of the iFrame changes based ...

htmliframe

Obtaining an attribute of a row in a table using Selenium and Python

I've been trying to figure out how to check if this button (image) has been clicked: It's crucial for me to interact with this button, as it allows me to modify the price of certain items and protect them when necessary. However, I need a way to ...

pythonhtmlseleniumselenium-webdriver

Displaying content using Jquery's slideDown feature, overlapping existing content

I am working on displaying one piece of content over another using Jquery slidedown as an overlay. Despite adding z-index properties, I am struggling to make it work. My goal is to have the div with class "selection_nip" appear as an overlay on top of ano ...

jqueryhtmlcss