Ways to create a unique animation for reducing the width of a div in a specific direction?

Currently, I have managed to animate the decrease in width of a div element. However, it is currently decreasing from right to left, and I would like it to decrease from left to right instead. Can someone please provide guidance on how to achieve this?


    .box {
        height: 0%;
        width: 830px;
        border-bottom: 20px solid #c00;

        -webkit-animation: increase 3s;
        -moz-animation: increase 3s; 
        -o-animation: increase 3s; 
        animation: increase 3s; 
        animation-fill-mode: forwards;
    }

    @keyframes increase {
        100% {
            width: 1px;
        }
    }
htmlcssanimation

Answer №1

Utilizing the Right and Position properties in CSS is another option.

div.b {
  height: 0%;
  border-bottom: 20px solid #c00;
  width: 830px;
  right: 30px;
  position: absolute;
  -webkit-animation: increase 3s;
  -moz-animation: increase 3s;
  -o-animation: increase 3s;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

@keyframes increase {
  100% {
    width: 10px;
  }
<!DOCTYPE html>
<html>

<body>
  <div class="b"></div>


</body>

</html>

Answer №2

To align the box to the right, simply add float:right to the .box class

 
        .box_LtR{
             height:0%;
             width:830px;
             border-bottom:20px solid #c00;  
            -webkit-animation: increase 3s;
            -moz-animation:    increase 3s; 
             -o-animation:      increase 3s; 
             animation:         increase 3s; 
             animation-fill-mode: forwards; 
         }

          @keyframes increase { 
            100% {
               width: 1px;
            }
         }
       
         .box_RtL{
           height:0%;
           width:830px;
           float:right;
           border-bottom:20px solid #c00; 
          -webkit-animation: increase2 3s;
          -moz-animation:    increase2 3s; 
           -o-animation:      increase2 3s; 
           animation:         increase2 3s; 
           animation-fill-mode: forwards; 
          }

        @keyframes increase2 {  
          100% {
             width: 1px;
          }
        }

 
    <div class="box_LtR">


    </div>

    <div class="box_RtL">


    </div>

Another option is...

    .box_LtR{
         height:0%;
         width:830px;
         border-bottom:20px solid #c00;  
        -webkit-animation: increase 3s;
        -moz-animation:    increase 3s; 
         -o-animation:      increase 3s; 
         animation:         increase 3s; 
         animation-fill-mode: forwards; 
     }

      @keyframes increase { 
        100% {
           width: 1px;
        }
     }
   
     .box_RtL{
       height:0%;
       width:1px;
       border-bottom:20px solid #c00; 
      -webkit-animation: increase2 3s;
      -moz-animation:    increase2 3s; 
       -o-animation:      increase2 3s; 
       animation:         increase2 3s; 
       animation-fill-mode: forwards; 
      }

    @keyframes increase2 {  
      100% {
         width: 830px;
      }
    }
<div class="box_LtR">


</div>

<div class="box_RtL">


</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

Show the output of JQuery in the text input area

Can anyone help me figure out how to display the value of #response in an input field instead of a div? I've tried using the code below, but it didn't work: <div id="response"></div> I attempted to use an input field like this, ...

jqueryhtml

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

javascriptjqueryhtmlajax

Is it possible to specifically focus on Google Chrome?

Can anyone help me with positioning the update button on www.euroworker.no/order? The button works fine in Firefox and Internet Explorer, but it's not displaying correctly in Chrome or Safari. I've tried targeting Safari and Chrome specifically, ...

csssafarigoogle-chrometarget

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap

The table row disappears but the value persists

I have designed a table where users can perform calculations. However, when a row is deleted, the values from that row appear in the row below it and subsequent rows as well. What I want is for the user to be able to completely remove a row with its values ...

javascripthtmlreactjs

How can I modify cell padding using a media query for a specific screen resolution?

In the desktop view, which is larger than 480px, I need a specific <td> to have a left-padding of 9px. However, once the resolution goes below 480px, this left-padding should increase to 18px. At the moment, my padding definition is specified within ...

cssemailresponsive-designmedia-querieshtml-email

Tips for implementing events with AngularJS Bootstrap Colorpicker

I am having trouble understanding how events function with Angular Bootstrap Colorpicker. I have forked a Plunker from the developer's example. Unfortunately, there are no examples provided for using events. It would be great if events like colorpick ...

javascripthtmlangularjscolor-picker

Internet Explorer seems to be having trouble detecting changes made to a jQuery checkbox

Here is an example of HTML code: <input type="checkbox" id="openInNewWindowCheckBox" value ="some_value" /> Accompanied by a jQuery script: $("#openInNewWindowCheckBox").change(function(){ if($(this).is(':checked')) ...

jqueryasp.nethtml

"Enhancing security measures with multiple nonce for Content Security Policy

I am encountering an issue with my single page application, which is developed in .net core MVC 2.2. The application loads html sections on the fly. In the main document, I have added a Content Security Policy (CSP) policy with a dynamically generated hea ...

javascripthtmlcontent-security-policynoncewebsecurity

Make the div disappear upon clicking the back button in the browser

When a user selects a thumbnail, it triggers the opening of a div that expands to cover the entire screen. Simultaneously, both the title and URL of the document are modified. $('.view-overlay').show(); $('html,body').css("overflow","h ...

javascriptjqueryhtmlcss

Requesting data asynchronously using AJAX and displaying the filtered results on a webpage using JSON

When I send a request to my node.js server for a .json file containing person information (first name, last name), I want the data to be filtered based on user input. For example: When I request the .json file from the server, it gives me a list of people ...

javascripthtmljsonnode.js

HTML5 Slideshow with Smooth Image Transitions

So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...

javascripthtmlcssslideshowtransition

Applying a filter within an ng-repeat loop to act as a conditional

Is it possible to use the ng-repeat as a conditional in an efficient and optimal way? I am wondering if there is a way for code to be shown only if found selected is true, without having to create a new variable in the back-end. <div ng-repeat="c ...

htmlangularjs

Combining two containers in CSS

I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation. #rightmenu { border-top: 1px solid #000000; border-right: 1px solid #00000 ...

csspositionpositioninghtml

Can parameters be included in the HTML class attribute?

Is it possible to embed specific information into HTML elements, like images, without disrupting valid HTML markup? Would the following example be considered valid HTML? <img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" > The idea is ...

jqueryhtmlcss

Develop a text input field using jQuery that automatically populates with a value calculated from an array's length and its contents upon page load

My goal is to generate dynamic text input fields based on an array received from a JSON. The number of input elements should match the length of the array, with each input field assigned a value from the array. These input elements are created when the pag ...

jqueryhtmljson

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

cssxhtml

Ways to bypass a transition using JavaScript

Hello everyone, I would like to start by apologizing for any mistakes in my English. I have been working on a website, which is currently available here: As you scroll down, the height of the image below the menu decreases. I am trying to make the navig ...

javascripthtmlcsscss-transitions

Issue with Bootstrap Toast failing to display after Bootstrap Modal closure

I am currently working on an app for a company directory that will help the company manage its employees, departments, and locations. This app is designed to allow users to make changes to the database only after confirming their actions. The app successfu ...

javascripthtmljquerybootstrap-4toast

Foundation 4 Framework: Mastering the Art of Clearing CSS Floats

I'm currently in the process of developing a website, but I am facing difficulties with clearing the floats. My website is built using the foundation 4 framework. Whenever I apply the .columns class to an element, it causes the elements to float left. ...

csscss-floatzurb-foundation