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.

https://i.sstatic.net/GqcOV.png

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

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...

csstwitter-bootstraptwitter-bootstrap-3css-frameworks

What is the best method for choosing these elements and surrounding them with a wrapper?

I need to style a title with two radio inputs by wrapping them in a form: <p><strong>Country</strong></p> <div class="radioWrapper"> <span class="label">Canada</span> <span class="radio"> ...

javascriptjqueryhtml

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

jquerycssoffset

Enable my textbox to interpret the html img tag

Is there a way to display emoji images instead of emoji symbols when inserting them into my textbox? For example, can I show the image representation of ':)' instead of just the symbol itself? ...

javascripthtml

Tips for retrieving nested data objects from a JSON API on the web

Below is the provided API link - I attempted to utilize this jQuery script in order to collect data for each state individually for my project. However, I am facing difficulties accessing the information with the code provided below. $.getJSON('http ...

javascriptjqueryhtmljsonapi

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

After browsing through numerous documentation websites, I have noticed that many of them share the same layout and features. This has led me to question whether there is a common library used by all these documentation sites. How do they achieve this unif ...

javascripthtmlcssdocumentation

Achieving proper layout in Material-UI Autocomplete by splitting long words

Exploring the Material-UI autocomplete feature for the first time has brought some challenges my way. I am working with usernames, which have a specific length limit but could exceed the space available in the autocomplete view. https://i.sstatic.net/O8t1 ...

cssreactjsmaterial-ui

Accessing HTML elements that are created dynamically in AngularJS

I am facing an issue where I cannot access a function within a newly created DOM element. Despite my best efforts, I can't seem to figure out what is causing this problem. $scope.createCustomHTMLContent = function(img, evtTime, cmname, evt, cust, ser ...

javascriptjqueryhtmlangularjsgoogle-visualization

Instructions on how to make a radio button selected when clicked are as follows:

My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...

javascripthtml

Adding CSS styles to an HTML page using JavaScript

Unfortunately, I do not have the ability to access the HTML directly as it is generated dynamically by a program. However, I do have access to the JS page that is linked to it. As an example, I am able to manipulate elements using JavaScript like so: ...

javascripthtmlcss

Only CSS creates tooltips within text seamlessly without any line breaks

I have been exploring ways to incorporate multiple tooltips into text on my website. After experimenting with both span and div tags, I was able to create a tooltip using CSS only. However, I am facing challenges with positioning the tooltiptext correctly. ...

htmlcss

Dimensions of HTML Container on Google Website

I'm attempting to incorporate a collapsible table using HTML Box in a Google site. The code for the collapsible table can be found at http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table. Here is the code: <html> <head> ...

javascripthtmlcssgoogle-sites

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

Is it possible for a form to direct submissions to various pages depending on the value of certain fields

I need to set up a text field and submit button that will redirect users based on their input: index.html: If the user inputs "123" in the text box and clicks submit, they should be redirected to john.html page. AND If the user inputs "456" and clicks s ...

javascripthtmlformsinputtextbox

Tips for repairing the gray margins on the right and left sides of a webpage

Currently utilizing Bootstrap 5 and incorporating columns within the framework. However, encountering an issue where there is black space on the right side of the screen and certain content disappearing on the left side as demonstrated here. Here is the c ...

htmlcssbootstrap-5

Struggling to create horizontal buttons for my design

Does anyone have any suggestions for fixing my navigation bar? I attempted to create it myself, but I'm struggling to make everything function properly. https://i.stack.imgur.com/h4yA1.jpg Below are the images of the button in all three states: htt ...

cssbuttonnavigationrow

How can I display a pre-existing div with a dropdown button?

I have individual div elements for each type of clothing item (shirt, pant, suit) that I want to display when the corresponding service is selected. This means that when I click on one of them, only that specific div will be shown. I am looking for a solut ...

javascriptjqueryhtmlcss

Conceal the prominent image when viewing a single post

I've been attempting to hide the featured image on single post view but so far, neither a plugin nor the theme panel option has worked for me. I even tried adding custom CSS code without success. Is there another method that can be used to hide the fe ...

css

Display an image overlaying a div

I am attempting to position an image outside of its parent div in such a way that it appears to be sitting on top of the div without affecting the height of the parent. However, no matter what I attempt, the image consistently gets clipped by the parent di ...

htmlcssimagecss-floatcss-position

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

htmlcss