What is the best way to change the orientation of a scanner loop animation to

Currently, I have a CSS style featuring an animation that scans across a line in a loop. My goal is to apply this animation to a horizontal line, but I am struggling to figure out how to rotate the scanner for a horizontal loop. Below is my current code. Any assistance would be greatly appreciated. Thank you.

code

.vl {
            height: 100%;
            position: absolute;
            right: 4.7%;
            top: 0;
            background-color: aqua;
            box-shadow: 0px 0px 12px aqua;
            width: 2.5px;
            height: calc(100% - 20px);
            border-radius: 50%;
            overflow: hidden;
        }
    
        hr.h1 {
            width: 100%;
            height: 0px;
            background-color: aqua;
            box-shadow: 0px 0px 12px aqua;
            width: 100%;
            height: calc(100% - 20px);
            border-radius: 50%;
            overflow: hidden;
        }
    
        .scanner {
            position: absolute;
            top: 0;
            left: 0;
            background: white;
            width: 100%;
            height: 20px;
            border-radius: 50%;
            animation: scanner-loop 3s ease-in-out infinite;
            background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
            height: 50%;
        }

        .scanner1 {
            position: absolute;
            top: 0;
            left: 0;
            background: white;
            width: 100%;
            height: 20px;
            border-radius: 50%;
            animation: scanner-loop 3s ease-in-out infinite;
            background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
            height: 50%;
        }
    
    
        @keyframes scanner-loop {
            0% {
                top: 0;
            }
    
            50% {
                top: 100%;
            }
    
            100% {
                top: 0;
            }
        }
<div class="vl">
<div class="scanner"></div>
</div>
<hr class="h1">
<div class="scanner1"></div>
</hr>

htmlcss

Answer №1

An error occurred with your animation. It is advised to separate animations for horizontal and vertical movements.

For the horizontal animation, ensure that the direction is set as to right and the keyframes should progress from left to right.

Please refer to the following example for a clear demonstration.

/* Vertical animation section*/
.vl {
  height: 100%;
  position: absolute;
  right: 4.7%;
  top: 0;
  background-color: aqua;
  box-shadow: 0px 0px 12px aqua;
  width: 2.5px;
  height: calc(100% - 20px);
  border-radius: 50%;
  overflow: hidden;
}

hr.h1 {
  width: 100%;
  height: 0px;
  background-color: aqua;
  box-shadow: 0px 0px 12px aqua;
  width: 100%;
  height: calc(100% - 20px);
  border-radius: 50%;
  overflow: hidden;
}

.scanner {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 20px;
  border-radius: 50%;
  animation: scanner-loop 3s ease-in-out infinite;
  background: linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  height: 50%;
}

@keyframes scanner-loop {
  0% {
    top: 0;
  }

  50% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

/* Horizontal animation section*/
.vh {
  width: 100%;
  position: absolute;
  top: 4.7%;
  left: 0;
  background-color: aqua;
  box-shadow: 0px 0px 12px aqua;
  height: 2.5px;
  width: calc(100% - 20px);
  border-radius: 50%;
  overflow: hidden;
}

.scanner-h {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  height: 100%;
  width: 50%;
  border-radius: 50%;
  animation: scanner-horizontal-loop 3s ease-in-out infinite;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

@keyframes scanner-horizontal-loop {
  0% {
    left: 100%;
  }

  50% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}
<!-- Vertical -->
<div class="vl">
  <div class="scanner"></div>
</div>

<!-- Horizontal -->
<div class="vh">
  <div class="scanner-h"></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

H3 Element Without ASP Causing Disruption in Page Layout

Looking at my .aspx page, I have the following code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="BootStrap.css" rel="stylesheet" type="text/css" /&g ...

htmlcssasp.nettwitter-bootstraptwitter-bootstrap-3

Ways to implement border spacing using CSS

Here's a snippet of the code I've been working on: HTML: <html> <body> <div id="article"> <h1>TITLE</h1> <p>text</p> </div> </body> </html> CSS: #article { colo ...

htmlcss

The issue with style.background not functioning in Internet Explorer is causing complications

I am currently developing a JavaScript game that involves flipping cards. However, I have encountered an issue with the style.background property. It seems to be functioning correctly in Chrome but not in Internet Explorer. Here is the problematic code sn ...

javascripthtmlcssinternet-explorer

Display an additional div when hovering over form input

I am currently in the process of designing a search bar animation. Specifically, I want the search history to appear when hovering over the search bar. However, I am facing an issue where the code doesn't seem to work when I use .search-bar-input:hove ...

htmlcss

The issue with Grid component in Nested Single file Component

I'm currently working on creating a grid component in Vue to set up a sortable and searchable chart using Single File Component. I've also integrated vue-router into the project. Below are my two .vue files. At the moment, I can only see the sear ...

javascripthtmlvue.jsfrontendvue-component

What is the reason behind the malfunctioning of this navigation menu?

This is a responsive navigation bar created using bootstrap. The issue I am facing is that I want the navigation items to be displayed in a single row. Here is the fixed-top navbar: Below is the navigation menu code: https://i.sstatic.net/Zqrvm.png ...

htmlcssbootstrap-4

Revamping repetitive JavaScript code for the pagination of Instagram Stories

I'm currently developing a website that utilizes fullpage.js and includes a section with multiple slides. These slides automatically transition every 10 seconds. I wanted to implement progress bars similar to those on Instagram, where each bar fills ...

javascripthtmlcsspaginationinstagram-story

The website is missing a scrollbar

I am having trouble getting the scroll bar to show up on my website, even after adding the following CSS: { overflow-y:scroll; } I have tried putting it in both the body and HTML sections of the CSS. If you'd like to take a look at the website, her ...

htmlcsswebscrollbar

retrieve the chosen option from the dropdown menu

Whenever I try to display the input type based on the selection from a select element, I encounter an issue Here is the select element within my view: <select id="type" name="type_id" class="form-control" required> @foreach($type as $row) & ...

javascriptphphtmllaravel

Struggling with CSS Flexbox when it comes to organizing rows and combining Table and Table Cells

I've been struggling to fix a CSS flex problem for hours. My goal is to make sure that the three boxes in each row have the same height. While I'm familiar with using flex, I suspect that floats may be the root of the issue. Even after clearing t ...

cssflexbox

Looking to retrieve the dynamic "Publish Date" value from a webpage using HtmlUnit in Java?

As part of a coding exercise, I am currently working on a project that involves comparing the current system date with dates on various web pages to determine if there are any new updates. While most of the pages work as expected, there is one particular p ...

javascriptjavahtml

Utilizing inline JavaScript to automatically refresh a webpage at specified intervals and monitor for updates within a specific div element

I am currently working on creating an inline script that will automatically refresh a webpage at regular intervals and check for changes in a specific element. If the element meets certain criteria, then the script should proceed to click on a designated b ...

javascripthtmlreloadintervals

Unable to alter fxFlex property within Component using "setAttribute('fxFlex', '25%')" does not function properly in Angular 6

Currently, I am utilizing the flexLayout module to create responsive divs in my Angular application. You can find more information about flexLayout at https://github.com/angular/flex-layout and also at https://alligator.io/angular/flex-layout/. const nav ...

htmlangulartypescriptfrontendangular-flex-layout

Retrieve information from the database upon clicking the submit button

My table is not getting data from the database when I click a button. I tried using this code but it returned an error. <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col ...

phphtmlmysql

CSS transform causing scrolling issues in Microsoft Edge browser

Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...

htmlcssoverflowcss-transformsmicrosoft-edge

Transform Plain Text String Into HTML Format

I'm having trouble getting this simple task to work as I expected. I have a Node.js program where I generate a string var based on some parameters. var generatedString = "some string" + "other string"; I want to pass this variable to a method as th ...

htmlnode.js

What is the process for dynamically looping through a table and adding form data to the table?

I am in the process of developing an hour tracking website that utilizes a form and a table. Currently, I have implemented the functionality where the form content gets added to the table upon the first submission. However, I need it to allow users to inp ...

javascripthtmlloops

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

javascriptjqueryhtmlcssiframe

What steps can I take to set a strict boundary for displaying the address closer to the current location?

While the autocomplete feature works perfectly for me, I encountered an issue where it suggests directions away from my current location when I start typing. I came across another code snippet that uses plain JavaScript to solve this problem by setting bou ...

javascripthtmlangulartypescriptgoogle-maps-api-3

Create a React MUI component that allows menu items to become sticky when selected

Is there a way to make the mui MenuItem stay sticky to Select while scrolling down? To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx Simply click on the select and start scrolling ...

javascriptcssreactjsmaterial-uidrop-down-menu