Attempting to create animation on the horizontal rule element, however, encountering difficulties in making it function properly

Can someone help me figure out why the animation for the hr tag is not working as intended? I'm trying to make it animate from left to right, repeat, and stay centered under the h2 tag.

.div-projects {
  margin-top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-projects h2 {
  font-size: 55px;
  padding: 90px;
  color: white;
  transform: skewY(-9deg);
}

.hr-projects {
  width: 20%;
  border-radius: 30px;
  z-index: 2;
  left: 900px;
  bottom: 60px;
  transform: skewY(-6deg);
  border: 3px solid rgba(0, 136, 169, 1);
  position: relative;
  animation: alternate hr 19s infinite;
}

@keyframes hr {
  from {
    left: 900px;
  }
  to {
    right: 600px;
  }
}
<div class="div-projects">
  <h2>Projects</h2>

</div>
<hr class="hr-projects">

htmlcss

Answer №1

To create a smooth animation or transition effect, you should focus on the same property throughout. For instance, transitioning from left 0 to left 100% or changing from left: 50px to left: 200px can produce interesting effects.

.div-projects {
    margin-top: 200px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.div-projects h2 {
    font-size: 55px;
    padding: 90px;
    color: white;
    transform: skewY(-9deg);

}

.hr-projects {
    width: 20%;
    border-radius: 30px;
    z-index: 2;
    left: 900px;
    bottom: 60px;
    transform: skewY(-6deg);
    border: 3px solid rgba(0, 136, 169, 1);
    position:relative;
    animation:alternate hr 19s infinite;
}

@keyframes hr {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}
<div class="div-projects">
    <h2>Projects</h2>
    
</div>
<hr class="hr-projects">

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

What is causing the input boxes to exceed their container boundaries so drastically?

My plan was to organize 4 input text boxes in 4 equal columns on a single row of the form. Using Bootstrap's grid column classes, I set col--3 for medium and large screens for those four inputs. For small and extra-small sizes, I designated them as co ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Clicking on a link with anchor "#" does not automatically scroll to the top of the page

Below is the link I am referring to: <a href='#'>click to update the page</a> This link triggers a JavaScript code that updates the contents of a div without needing to refresh the entire page by posting back to the server. The issu ...

javascripthtml

Is an extra outer div required for Bootstrap 5 dropdowns?

After encountering a persistent issue with Bootstrap 5 dropdowns being clipped by the table or table-responsive div, despite the data-boundary="viewport" attribute not working as expected, I found a solution. Simply adding the position-static class resolve ...

htmlcsstwitter-bootstrapbootstrap-5

Attempted to remove Child Div using Jquery, but it did not get removed as expected

Trying to remove child divs inside a parent div? There are several methods, such as: $(".ChildDiv").html(""); $('.ChildDiv > div').remove(); $(".ChildDiv").html(""); $("#ParentDiv").html(""); $(".ChildDiv div").remove(); $(".ChildDiv di ...

javascriptjqueryhtmlcssasp.net

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

I'm struggling to figure out the correct way to write this script. Can someone please guide me in the right direction or suggest an alternative method? I've searched but haven't found any relevant examples. I am fetching information from a ...

javascriptphpcssmysqlajax

Is there a way to create a div that resembles a box similar to the one shown in the

Hello, I am attempting to achieve a specific effect on my webpage. When the page loads, I would like a popup to appear at the center of the screen. To accomplish this, I have created a div element and initially set its display property to 'none'. ...

javascriptjqueryhtmlcss

What is the best way to modify the color of a button within an AngularJS function by utilizing the same button?

Currently, I have a function assigned to the ng-click event on a button in order to filter a list. My goal is to change the color of the button once it has been clicked and the filtered list is displayed. I am looking for a way to achieve this within the ...

htmlcssangularjs

Clicking on a link does not place the focus on the corresponding input field

My project involves creating a One Pager website with a navigation menu. I am looking to implement radio inputs that are associated with the clicked link (a) so that I can apply CSS styles to the active radio button. Currently, the CSS is applied when the ...

htmlcss

Generating random objects in a straight line with Javascript and HTML5: A step-by-step guide

In my current project, I am developing a game using Javascript/HTML5 (within a canvas element) that features two distinct types of objects (referred to as object type A and object type B) falling from the top of the canvas. The goal for players is to swip ...

javascripthtmlobjecthtml5-canvasdom-events

Overlaying images with cropped elements

When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle. Something resemblin ...

javascriptcss

Creating classes in PHP and customizing them with CSS

I have a table being pulled from my database that I am attempting to style. Currently, I am displaying it with the following PHP code: echo "<table class='rwd-table'>"; echo "<tr><th>ID</th><th>Username</th>& ...

phphtmlcssmysqlsql

Attach a floating div to multiple elements throughout a webpage

Looking for the optimal method to place a div in various locations on a webpage while anchoring it from the bottom left. The div should be able to be attached to any element on the page for relative positioning, specifically intended for a tooltip. Each ...

css

CSS: Struggling to center elements vertically with flexbox

Can someone help me with adding a class for vertical alignment (top, middle, or bottom) in my code? Here is what I have so far: .row { display: flex; background-color: #f0f0f0; } .col-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25% ...

htmlcssflexbox

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card? The desired outcome: <link rel="stylesheet" href="https://cdn.jsdeli ...

htmlcssbootstrap-5

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

How can AngularJS focus on the last element using ng-repeat and md-focus?

, there is a code snippet that utilizes AngularJS ng-repeat directive to iterate through 'items' and 'md-autofocus' attribute to focus on the last element. The code is contained within an md-dialog with vertical scrolling functionality. ...

javascriptangularjscssangular-material

Is there a way for me to retrieve the data inputted into this form using JavaScript?

Having some trouble with this code. Can someone help me figure out what's going wrong? function displayData() { var userInput; userInput = document.getElementById(userInputs.firstInput); alert ("You entered: " + userInput); } <form ...

javascripthtmlformsinput

Looking to include a badge within the nebular menu

Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...

htmlcssangulartypescriptnebular

Convert an HTML webpage into a JSON format that represents the structure of the DOM tree

I am having an index.html file with multiple div tags inside it. I am attempting to retrieve content from all the div tags on the page, but currently, I am only able to fetch the content from the first div tag. What I actually need is the content from all ...

phphtmljsondomhtml-parsing

Changing the height of tablerows in Material UI v5: A step-by-step guide

I am attempting to adjust the height of the rows in this material-ui code example. import * as React from "react"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; import ...

javascriptcssreactjsmaterial-ui