The linear motion of a straight line means the line will start from one point, goes to the second point, and then came back to the starting point. It is a kind of to and from motion. We will be doing it using CSS only.
Approach: The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.
HTML: In HTML, we have created a div element that is used to make a straight line.
- Create a straight line by providing minimum height and width of your preference.
- Animate this straight line using before selector and provide it a linear animation with keyframes identifier named as animate.
- The animation for keyframes is very simple. For the first half-frames make width 100%(forward movement) and then reduce it to 0%(backward movement) for the next half frames.
Complete Code: In this section, we will combine both HTML and CSS code to make a straight line animation effect.
- How to animate scrollTop using jQuery ?
- How to animate the drawing on a web page?
- How to animate div width and height on mouse hover using jQuery ?
- How to read a file line by line using node.js ?
- CSS | linear-gradient() Function
- CSS | repeating-linear-gradient() Function
- How to create linear gradient text using HTML and CSS ?
- How CSS transition work with linear gradient background button?
- CSS | ::first-line Selector
- How to avoid a new line with tag?
- How to add a new line in the alert box ?
- p5.js | line() Function
- How to write <dt> and <dd> element on the same line using CSS ?
- How to set indent the second line of paragraph using CSS ?
- PHP | GmagickDraw line() Function
- CSS | line-height Property
- How to break line without using <br> tag in HTML / CSS ?
- PHP | ImagickDraw line() Function
- How to insert line break before an element using CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.