Ways to enlarge an element upon loading with just CSS?

Currently, I am trying to load an element with the following initial CSS values:

.popOver {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: #d9dfe5;
  transition: all 2s ease-in-out; 
  transform: scale(0,0); 
}

I am looking for a way to change the scale to (1, 1) when the element loads on the page and smoothly see the transition. Can anyone provide assistance?

Answer №1

transition is applied as soon as the page loads, which may not be ideal for your situation. Instead, you can utilize CSS @keyframes to set scale(0,0) to the class, and then scale it to 1,1 at 100% using keyframes after the page has fully loaded.

Demo (Code refactored with added animation-fill-mode to prevent the popup from scaling back to 0, revision 2)

.popOver {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: #d9dfe5;
    -webkit-animation: bummer 2s;
    animation: bummer 2s;
    -webkit-transform: scale(0,0); 
    transform: scale(0,0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; /* Added to keep modal open after animation */
}

@-webkit-keyframes bummer {
    100% {
        -webkit-transform: scale(1,1); 
    }
}

@keyframes bummer {
    100% {
        transform: scale(1,1); 
    }
}

By setting the initial scale to 0,0 and animating to 1,1 using keyframes, you control the duration of the animation by adjusting the 2s value (which represents 2 seconds).

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

When the span element's height is set to 100%, it does not automatically match the height of its parent div

I have a scenario where I am working with two div elements and a span element in between. The parent div element does not have a defined height, it is calculated based on the content within the div. However, the span element's height is set to 100% ev ...

What are the best ways to creatively design HTML content generated using JavaScript?

I am currently using Squarespace 7.1 to create a website that features a randomly generated quote in the footer section. The quote is generated from a JavaScript array when the page loads, reloads, or changes. Despite the code functioning as intended (test ...

Confirming the data entry format

I am currently utilizing the RobinHerbots/Inputmask plugin to mask telephone input. I am interested in finding out how I can implement input validation to ensure that the user has entered accurate information. Thank you! <form> <input ty ...

Is there a way to set the <hr /> tag to display vertically?

Is there a way to make the <hr /> tag go in a vertical direction rather than appearing horizontally as it normally does? I am looking for a solution that can be used on a mobile site with broader compatibility across browsers, rather than relying on ...

An anomaly where a mysterious symbol appears in front of every dollar sign in an HTML document

I have a code written in AngularJS to display the amount in dollars. However, there is an unwanted " Â " character appearing before every " $ " character in the HTML. I am looking for a way to remove this character. Your help is greatly appreciated. Thank ...

What could be preventing my XPath from selecting a link/button using its label text?

<a href="javascript:void(0)" title="home"> <span class="menu_icon">Possibly more content could go here</span> Home </a> When I use //a as the XPath in the above code, it is highlighted. However, when I try //a[contains(text ...

Changing from columns to rows in Bootstrap 4 for small screens

I am working on a project that involves creating a grid with 4 columns and 4 rows. The challenge I am facing is making the 4th column transition into a 5th row on small displays, instead of being displayed as a column on medium to large screens. This proje ...

Interference of setInterval with other setInterval functions

Attempting to set up multiple setInterval functions and store them (for later clearing) results in the last setInterval overriding the previous ones. This causes each interval to execute only once, with the same output. Below is a code snippet demonstrati ...

Unusual activity observed in HTML5 contenteditable functionality

Within a list item, I have a span element. <ul> <li>text part 1 <span class="note">this is a note</span> text part 2 </li> <li>text part 3</li> </ul> When you double click on th ...

Is it considered a bad habit to utilize custom CSS on Bootstrap classes?

Imagine I have the following code snippet in my index.html file, and I am utilizing Bootstrap: <head> bootstrap stylesheet main.css stylesheet ... <button class="btn btn-primary">Button</button The class "btn-primary" is used to style the ...

Why does it seem like I can only see one of my two modals?

I'm experiencing an issue with displaying two modals on the same page. The first modal appears correctly, but the second one does not show up. Only the dark "opacity" screen is displayed, without the modal itself. I've tried various solutions fro ...

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Trying out a full page layout for the first time, with a left div serving as a block style nav. #admin_nav { width: 230px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #ddd; float: left; } The content is on the rig ...

adjusting the color of ion-button when hovering over the cancel button

I'm working on a button bar for my app and I want the color of the button to change based on its state (false, true). Currently, the button starts out green, turns light green when hovered over, and becomes white when clicked. Once I click it, the bu ...

What is the process for transferring input field values to PHP?

I am working on setting up a database and login form, and I need to create a PHP script to validate the login credentials. What are the different types of data access and how can they be utilized? Specifically, how do I retrieve user input from elements ...

Add a touch of shadow to a stationary top banner as you scroll through the page

Is there a way to gradually fade in a shadow while scrolling, so that the shadow only reaches an opacity of 0.5 after scrolling a certain number of pixels? I've come across solutions to add a shadow or class to the top banner based on content position ...

What is the best way to expand my navigation bar to fill the entire width of my div?

A big shoutout to @seva.rubbo for fixing the issue! Check out the updated code on JSFiddle I recently designed a layout with a fixed width div of width: 900px;. I centered this div, leaving blank spaces on either side. Now, I'm looking to add a navig ...

Incorporating an unique identification code within the input field

I have a HTML code that displays geolocation information: <span id="currentLat"></span>, <span id="currentLon"></span> When combined with JavaScript, it works perfectly. However, I am trying to display the above value in a text fi ...

Voting Dynamics in Django: Ordering by Popular Vote

There is a lot of existing documentation on this topic, but so far, none of the solutions have worked for me. As the title suggests, my goal is to sort a set of objects using Django Voting based on the number of votes they have (from high to low). I have a ...

Access the Page After Being Redirected

Forgive my potentially naive question, but I am curious to know if there exists a code that can prevent a page from opening when accessed via a direct link, but allow it to open only if the link is coming from another page. For instance, imagine I have a ...

Completion status of circle loader: 100%

I am currently facing some challenges getting the circle loader to work correctly. Although I can handle basic animations, the code I found on CodePen is a bit more advanced than what I am used to. I am using it as a learning experience to understand how i ...