CSS3 animations can sometimes result in incorrect element sizing due to the animation-fill-mode property

After experimenting with CSS3 animation, I encountered an unusual issue. Adding animation-fill-mode to the "parent" <div> caused the width of the "child" <div> to be less than 100% upon completion of the animation. Can anyone shed light on why this is happening? Removing this style resolves the problem.

<div id="parent" class="fadeInLeft" >
     <div id="child">   </div>
</div>

#parent {               
            width: 300px;
            height: 300px;
            background-color:blue;
            border: 1px solid red;
            margin:50px;               
        }

#child
        {
            position:absolute;
            width:100%;
            height:100px;
            border:1px solid black;
            z-index:10;                
        }

  .fadeInLeft {
            -moz-animation-name: fadeInLeft;
            -o-animation-name: fadeInLeft;
            -webkit-animation-name: fadeInLeft;
            animation-name: fadeInLeft;

            -webkit-animation-duration: 1s;
             animation-duration: 1s;
             -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
}


   @-webkit-keyframes fadeInLeft {
   0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

https://jsfiddle.net/7gy4b2op/

Any insights would be greatly appreciated.

cssanimation

Answer №1

#parent {
    /*display: inline-block;*/
    width: 300px;
    height: 300px;
    background-color:blue;
    border: 1px solid red;
    margin:50px;
}

#child {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    position:absolute;
    width:100%;
    height:100px;
    border:1px solid black;
    z-index:10;
            
        }

.fadeInLeft {
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
     -webkit-animation-name: fadeInLeft;
     animation-name: fadeInLeft;

    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
<div id="parent" class="fadeInLeft" >
    <div id="child">   </div>
</div>

Are you looking to make the child slightly larger than the parent? If so, consider adding box-sizing:border-box; to your child element.

Answer №2

The calculation is accurate.

The offspring extends the full width of its designated parent. When a transformation is supplied to the parent element, it becomes positioned and serves as the reference point for the child's 100% width.

However, in other cases, the child inherits its width from the body element.

To verify this behavior, consider changing the parent's position to relative; you will observe the same outcome (300px).

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

Creating a WordPress Infographic: How to Design a "Wide" Graphic

I have a question for those who are experienced with infographics. I'm in the process of getting an infographic designed for my blog and I've noticed that some websites have a feature that allows the infographic to expand to full width when you c ...

phpcsswordpress

Developing User-Friendly Websites with Responsive Design

While I was working on my project, I realized that using only pixel values in tables and sidebars was a big mistake. This caused issues because if someone had a different screen resolution, my website would look distorted and unappealing. Could you please ...

htmlcsslaravel-5responsive-design

What is the best way to add border-radius to an image while incorporating padding?

I am facing an issue with images that have white padding at the top and bottom. Please refer to the attached image. Whenever I try to apply the border-radius property to these images, the edges appear distorted. Is there a way to resolve this problem wit ...

htmlcss

Implementing dynamic background images in Angular 4 using div placeholders

Is there a way to include a placeholder or default image while waiting for item.imgSrc to load on the screen? <div class="style" *ngFor="let item of array; <div [style.backgroundImage]="url('+ item.imgSrc +')" class="image">< ...

htmlcssangular

Styling an input button to look like a link in Firefox and Internet Explorer

I'm currently using CSS to give my input button the appearance of a link. Here's how I've styled it: input#linkLike { background: none; border: none; cursor: pointer; margin: 0; padding: 0; text-decoration: none; ...

htmlcssfirefox

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

htmlcsswordpressbootstrap-4text-alignment

What is the best way to modify the CSS class of a particular textbox within a gridview using C# in ASP.NET?

I need assistance with removing and adding a CssClass to a specific textbox within a gridview. I have attempted the following code but it does not update the css for the textbox. Here is the CSS in my .aspx page: <style type="text/css"> .erroram ...

c#htmlasp.netcssgridview

CSS responsive grid - adding a horizontal separator between rows

I currently have a responsive layout featuring a grid of content blocks. For desktop view, each row consists of 4 blocks. When viewed on a tablet, each row displays 3 blocks. On mobile devices, each row showcases 2 blocks only. I am looking to add a ho ...

javascriptjqueryhtmlcssresponsive-design

Preventing default events on a jQuery slider: enhance user experience

I'm currently experimenting with the superslides library for my project, and I have been trying to implement custom effects on the animations. This is how I attempted to do it: During the beforeChange event, I want to prevent the event from propa ...

jquerycss

When a StaticFiles instance is mounted, FastAPI will issue a 405 Method Not Allowed response

Running a FastAPI application has been smooth sailing until I encountered an issue. In my current setup, the application script is as follows: import uvicorn from fastapi import FastAPI from starlette.responses import FileResponse app = FastAPI() @app.ge ...

javascriptpythonhtmlcssfastapi

The PHP Include function seems to be malfunctioning and unable to properly display

Everything you see is what I have on my home.php page <?php include ('../bgs/bg-verbier.html'); include('../menus/menu-verbier.html'); ?> Both of the files requested are located in the parent directory. The /menus/menu-v ...

phpcss

Enhance your iPhone web app with high-resolution retina images!

As I develop a mobile web application accessible on any smartphone, I have the index.html file available for review: The app includes 2 jQuery functions. One detects if the user is using an iPhone and displays a bubble with instructions to add it to the h ...

javascriptiphonecssweb-applications

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

htmlcsshtml-listsinline

Modifying website elements with JavaScript

Can someone assist me with getting a script to work on my website that will allow me to switch between four different sets of content using buttons labeled 1, 2, 3, and 4? I have tried using addClass and removeClass but cannot seem to get it right. Here i ...

javascriptjqueryhtmlcss

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

cssangularscss-mixinsnebular

AngularJS search box functionality allows users to easily search through a

1 I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appr ...

css

Safari is having trouble correctly displaying a CSS3 gradient with transparency

Here's a tricky puzzle for you. The gradient below is not displaying correctly in Safari, but it works perfectly fine in Firefox and Chrome: background: linear-gradient(transparent 124px, #de6230); I've even attempted the following fix without ...

csssafari

Focus on targeting dynamic IDs such as #event_rules_attributes_0_interval, #event_rules_attributes_1_interval, etc. using CSS3 styling

Styling input tags using their IDs can be very convenient due to the higher precedence weight they hold compared to classes. For instance, I set a default width for input.text elements within a specific container: .details .metadata input.text { width: 2 ...

csscss-selectors

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

htmlcssfirefox

I'm having trouble finding a solution to remove the white space

I've been troubleshooting a website and noticed some unexpected whitespace on the page. Even though I have set my page wrapper div and other elements to width: 100%, the content in between is not utilizing the full width of the screen. I suspect this ...

htmlcss