Looking for assistance with CSS border animation

Below is my code snippet:

.section-one {
    position: relative;
    background: #ffffff;
}
.section-one h2 {
    color: #000000;
    font-size: 32px;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    font-family: "AzoSans-Medium";
}
...
/* CSS code goes on */
...

In this code, I have implemented a border animation technique where a layer covers the border and moves in a specific manner to gradually reveal the border.

The red layer covering the border works as intended, slowly revealing it. To see the actual animation effect, you may need to change the color from red to white.

I'm also attempting to animate another section (Heading 2 section) with a similar red layer, but there seems to be an issue with a small lime layer:

  1. The lime layer should move within the area marked in blue, but currently it's moving within the red area. This discrepancy can be seen in the image provided below.
  2. Possibly, the positioning of the lime layer is incorrect initially, as I believe its top left corner should align with the left corner of the blue box.

In essence, I want the lime layer to exhibit correct animation behavior similar to the red layer, albeit in a different direction.

See the JSFIDDLE demo linked here for a better understanding: https://jsfiddle.net/csgwutjp/1/. For optimal viewing, adjust the window size as shown in the attached image.

htmlcss

Answer №1

When working on animating the right-hand side border, it's essential to switch the 'mask' that moves over it so that the part covering the entire border is on the right while the shorter section covering just the bottom half is on the left.

In making this adjustment, positioning and transitions must also be altered accordingly.

.section-one {
  position: relative;
  background: #ffffff;
}

.section-one h2 {
  color: #000000;
  font-size: 32px;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Medium";
}

.section-one p {
  color: #000000;
  font-size: 16px;
  margin: 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Regular";
}

.section-one .boxes {
  position: relative;
  margin-top: 75px;
}

.section-one .boxes:last-child {
  margin-bottom: 100px;
}

.section-one .boxes .left-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  z-index: 3;
}

.section-one .boxes .left-box img {
  width: 100%;
}

.section-one .boxes .right-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  height: 100%;
  z-index: 2;
}

.section-one .boxes .right-box.left:before,
.section-one .boxes .right-box.left::after {
  left: 0px;
  right: -30px;
}

.section-one .boxes .right-box:before,
.section-one .boxes .right-box::after {
  position: absolute;
  content: "";
  top: 50px;
  left: -30px;
  right: 0px;
  bottom: 25px;
  z-index: -2;
}

.section-one .boxes .right-box:before {
  border: 1px solid #f29d1f;
}

.section-one .boxes .right-box.left h2 {
  text-align: left;
}


/**updated starts**/

.section-one .boxes .right-box.left:before {
  left: 0px;
  right: -30px;
}

.section-one .boxes .right-box.left::after {
  right: 0px;
  /* turned round */
  left: -30px;
}

.section-one .boxes .right-box.left:before {
  /* left: 0px;
      right: -30px; */
  border-right: none;
  border-radius: 250px 0px 0px 250px;
}


/**updated ends**/


/** purely new code starts**/

.section-one .boxes .right-box::after {
  width: 200%;
  height: 100%;
}

.section-one .boxes .right-box.left::after {
  background-position: 0 0, 100% 75%;
  background-size: calc(50% + 30px) 100%, 50% 50%;
  background-repeat: no-repeat no-repeat, no-repeat no-repeat;
  background-image: linear-gradient(red, red), linear-gradient(red, red);
  animation: left 1s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  /* just to give time to go full screen on SO snippet! */
}

@keyframes left {
  0% {
    background-image: linear-gradient(red, red), linear-gradient(red, red);
    transform: translateX(0);
  }
  49.99% {
    background-image: linear-gradient(red, red), linear-gradient(red, red);
  }
  50% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(red, red);
    transform: translateX(-50%);
  }
  99.99% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(red, red);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/** purely new code ends**/

.section-one .boxes .right-box.right h2 {
  text-align: right;
}

.section-one .boxes .right-box.right:before {
  border-left: none;
  border-radius: 0px 250px 250px 0px;
}


/* probably code where to look starts */

.section-one .boxes .right-box.right::after {
  padding: 0;
  margin: 0;
  width: calc(200% + 60px);
  left: -30px;
  transform: translateX(-50%);
  background-position: 0 75%, right 0;
  /* turned round */
  background-size: 50% 50%, 50% 100%;
  /* turned round */
  background-repeat: no-repeat no-repeat, no-repeat no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  animation: right  5s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}

@keyframes right {
  0% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
    transform: translateX(-50%);
  }
  49.99% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
  }
  50% {
    background-image: linear-gradient(white, white), linear-gradient(transparent, transparent);
    /* turned round */
    transform: translateX(0px);
  }
  99.99% {
    background-image: linear-gradient(white, white), linear-gradient(transparent, transparent);
    /* turned round */
    transform: translateX(-50%);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* probably code where to look ends */

.section-one .boxes .right-box h2 {
  padding: 50px 0px 20px 0px;
}

.section-one .boxes .right-box p {
  display: block;
  margin: 15px auto;
  width: 100%;
  max-width: 355px;
  text-align: justify;
}

.section-one .boxes .action-btn {
  position: relative;
  text-align: right;
}

@media (max-width: 1199px) {
  .section-one h2 {
    font-size: 28px;
  }
  .section-one p {
    font-size: 15px;
  }
  .section-one .boxes {
    position: relative;
    margin-top: 50px;
  }
  .section-one .boxes:last-child {
    margin-bottom: 75px;
  }
  .section-one .boxes .right-box:before {
    left: -30px;
  }
  .section-one .boxes .right-box.left h2 {
    text-align: left;
  }
  .section-one .boxes .right-box.left:before {
    border-radius: 200px 0px 0px 200px;
  }
  .section-one .boxes .right-box.right h2 {
    text-align: left;
  }
  .section-one .boxes .right-box.right:before {
    border-radius: 0px 200px 200px 0px;
  }
  .section-one .boxes .right-box h2 {
    padding: 50px 0px 15px 0px;
  }
  .section-one .boxes .right-box p {
    display: block;
    margin: 15px auto;
    width: 100%;
    max-width: 355px;
    text-align: justify;
  }
  .section-one .boxes .action-btn {
    position: relative;
    text-align: right;
  }
}

@media (max-width: 991px) {
  .sec...
 
  ***Your paraphrased text here***
  
...ipt></script>animation

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

Tips for Aligning a Collection of Relative Positioned Divs within a Parent Relative Positioned Div

Struggling to dynamically center a group of relative positioned divs within a parent div that is also relative positioned. The parent div has a width of 620px, while the child divs are each 200px wide. There could be 1 to 3 child divs per line, which is w ...

htmlcss

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

Discovering a CSS value using jQueryUncovering the CSS value with jQuery

Currently, I have a script that allows me to change the color of an event in a calendar to red when clicked. eventClick: function(calEvent, jsEvent, view) { $(this).css('border-color', 'red'); } Now, I want to enhance this featur ...

javascriptjquerycssjson

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Whenever I attempt to run this function, I encounter an issue. My goal is to retrieve the latitude and longitude of an address from Google's API. This error message pops up: core.js:15723 ERROR TypeError: Cannot read property 'geometry' of ...

htmljsonangulartypescript

Fade background position rollover effect

I'm facing a challenge with animating my background image using background positioning. The CSS is functioning correctly, but when I attempted to enhance it by adding jQuery for a rollover effect, the animation isn't working as expected. Can anyo ...

jquerycss

Issues with CSS rendering have been observed following an ajax update when using the <ui:repeat> tag

This scenario is a bit intricate. Essentially, I am utilizing Material Design Lite CSS provided by Google and triggering an AJAX request to dynamically add input fields using PrimeFaces. <h:commandLink value="+ Add something> <f:ajax listener ...

cssajaxjsfmaterial-design-lite

The Material UI button shifts to a different row

I need help adjusting the spacing between text and a button on my webpage. Currently, they are too close to each other with no space in between. How can I add some space without causing the button to move to the next line? const useStyles = makeStyles((the ...

javascriptcssreactjstypescriptmaterial-ui

Uncover a section of text from HTML using the Beautiful Soup module

I have an HTML snippet like this: <span id="lbldiv" class="lbl" style="color:Blue;"> Division : First; Grand Total: 3861; Grand Max Total: 4600 </span> By using the get_text method on the span element, I can extract the text: Division : ...

pythonhtmlbeautifulsoup

Generating a JavaScript variable linked to a Rails Active Record relationship

I'm trying to implement an active record association in the DOM, but I'm encountering some difficulties. Here is my editor class: .editing .row .col-sm-3 .col-sm-8 .text-left #font-20 .title-font . ...

javascriptjqueryhtmlruby-on-railsruby-on-rails-4

Struggling to align button text vertically in the center

I've searched through various sources, including stackoverflow.com and other websites, to solve this problem I'm encountering. Despite trying everything I found, I still can't get the text to center vertically in Firefox when styling buttons ...

htmlcss

One potential solution to reorganizing the layout is to utilize two rows instead of just one

My current form layout is not very user-friendly, as it appears to be too long for one row. I have fields for amount, note, date, and an option list. I would like to arrange the form so that amount and note are displayed in one row, followed by date and o ...

htmlcss

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

javascripthtmlcss

Mastering responsive layout design in Nextjs using Tailwind CSS

I am attempting to design a card layout where the image is on the left and the content of the card is on the right using flex in NEXTJS and Tailwind CSS. My goal is to ensure that the image remains responsive. <div className="block"> < ...

cssnext.jstailwind-cssnext-images

Semi-Transparent Photo Slideshow

Currently, I am in the process of developing a Pokedex-like feature for a project that I am working on. The functionality is working as expected, but there is one particular feature that I would like to implement. My goal is to display only certain element ...

javascripthtmlcsscarousel

React.js experiencing issues with loading the splash screen

I am developing a Progressive Web App (PWA) and I am currently facing an issue with displaying the splash screen. In my index.html file, I have added the following code to the head section: <link rel="apple-touch-startup-image" media="scr ...

javascripthtmlreactjsnext.jsprogressive-web-apps

Tips for transforming the appearance of an asp.net page with asp:Content into a stylish css-page

Currently facing an issue where I am unable to change the background-color in my CSS file. As a workaround, I have placed the style directly within an ASP page. <asp:Content Id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> ...

c#htmlasp.netcss

ng-view is the culprit behind the website's fatal error

Encountering a "RangeError: Maximum call stack size exceeded" in the console while trying to recreate a basic routing example from w3schools. The crash seems to be linked to <div ng-view></div> in index.html. Despite making minimal changes from ...

javascripthtmlangularjsangular-routing

What is causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

javascripthtmlsvg

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...

jquerycss

Generating HTML table rows dynamically from objects using Angular's ng-repeat functionality

In my Node-RED setup, I am utilizing the HTML angular code within a "template" node. Within my system, I have an object that consists of circuit boards distinguished by serial numbers. Each circuit board is equipped with two channels, each having its own ...

htmlangularjsobjectnode-red