What is the best method to reduce the size of an element from top

I am looking to create a disappearing effect for a div by animating its size from 100% to zero. However, when I set the height in the animation, the element starts shrinking from the bottom instead of the top. Any suggestions on how to achieve this?

Here is the current code for my animation:

@-webkit-keyframes my-animation /* Safari and Chrome */
{

    0%
    {
        opacity: 1;
        height:44px; //initial element size
    }

    100%
    {
        opacity: 0;
        height: 0px;
    }
}

Any help would be appreciated. Thank you.

htmlcsswebcss-animations

Answer №1

To achieve the desired effect, utilize a bit of positioning in your code. Here is the modified snippet:

<div class="bar"></div>

--

.bar {
    position: relative;
}
@keyframes bar {
    100% {
        opacity: 0;
        height: 0;
        top: 60px; /* Adjust the height accordingly */
    }
}​

For a demonstration, check out this interactive example (hover over to activate the animation): http://jsfiddle.net/johndoe/Xyz123/

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

What is the best way to include a variable in an anchor tag?

In my Vue application, I have a header that displays different links based on the environment. The root of the link changes depending on the environment, so I've stored an environment variable with this root value. I'm importing this variable in ...

htmlvue.jsenvironment-variableshref

Button functionality disabled in Firefox, yet functional in Chrome

Here is the header code snippet: <header id="app-header" className="fluid-container navbar navbar-default"> <div> <button className={buttonClass} onClick={this.openSideBar}> ...

csstwitter-bootstrapreactjsfirefoxsass

Issue with Jquery function causing page content to disappear

When using this JQuery function to generate a table based on JSON, I am facing an issue where the content that should appear after this function is not displaying properly. I have tried adding an HTML table after the function but it does not seem to work a ...

javascriptjqueryhtmltwitter-bootstrap

Dealing with missing image sources in Angular 6 by catching errors and attempting to reset the source

When a user adds a blob to my list, sometimes the newly added image is still uploading when the list is refreshed. In this case, I catch the error and see the function starting at the right time: <img src="https://MyUrl/thumbnails/{{ blob.name }}" widt ...

angularhtmltypescript

Alignment slightly off when trying to vertically center inline elements

I'm struggling with aligning an icon (<img>) vertically next to some text. The icon always appears slightly lower than the text, as shown in the example below. Can someone please suggest a solution to center it vertically with the text? Example: ...

htmlcssflexboxvertical-alignment

Choose a text input form field simultaneously?

Is it possible to create a select field that also acts as an input form simultaneously? I need the options in this hybrid field to range from 0.01 to 10.00, while ensuring it always displays 2 decimal places. Curious how I can achieve this functionality ...

phpjavascriptjqueryhtml

Color-changing background effect when tapping inside a contenteditable element

Is there a way to prevent the background of a contenteditable div from flickering gray when touched inside the div? This issue can be observed on iOS Safari or UIWebview object. Check out this HTML demo for an example: You can also view an image demons ...

ioscsshtml

Trouble with CSS animations in ThreeJS's CSS3DRenderer

Seeking a way to incorporate plain text (2D or 3D) into a threeJS scene while applying CSS effects, I stumbled upon this resource. It seemed to offer the solution I was looking for. However, when I tried to apply an animate.css class (a well-known CSS anim ...

cssthree.js

Customizable page layout with fixed width that adjusts based on content

I am looking to enhance the design of my website by updating its template. I want the content to be displayed within a fixed width centered div. While there are plenty of examples on the web for this, I want to ensure that existing text and tables in my ...

csshtml

Inspect every div and perform an action if the criteria are met

I need assistance with adding text inside a specific div based on certain conditions. Currently, all the div elements are being populated with the added text. Please review my code for more clarity on what I am trying to achieve. Can you suggest the most e ...

jqueryhtml

The HTML tags within $this->username will not be removed

I have been facing issues with my website being hacked due to the presence of old ">blah as a username. Despite using strip_tags(), the tags are not getting stripped, although addslashes() seems to be working. It's possible that I missed a bracket ...

phphtmlstrip-tags

How to perfectly align squares in CSS Grid

I'm working on arranging four squares in a grid pattern, two on top and two on the bottom, with equal spacing between them. Currently, the squares shift based on the fr value in CSS grid, resulting in uneven spacing like this: I want to align all fou ...

htmlcsscss-gridcentering

Is there an API available for PHP curl that can fetch a JSON response through ajax to retrieve credit card results using Payeezy?

I am currently facing an issue while utilizing the PHP curl API with a JSON request using AJAX to submit a form. The form does not get submitted or receive any response. Can anyone provide suggestions on how I can improve the AJAX functionality? It is esse ...

phpjqueryhtmlajaxphp-curl

Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows: <td>Master Event:</td> <td> <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" > <label f ...

htmlcss

Capture cached images stored in the browser memory without relying on the source attribute of the <img> tag

Imagine you're managing a website, samplewebsite.com and you find that the images on it have been resized to very low quality. When you click on an image, you are directed to a 'view_image' page, for example samplewebsite.com/view?image=u ...

javascriptjavahtmljsoupbrowser-cache

What is the reason for setters being overridden rather than invoked when utilized in web components?

I am delving into the realm of creating custom tables using web components, and I'm exploring how to define properties on my custom elements using getters and setters. Here is a simple table with one column and a custom row element that includes a lin ...

javascripthtmlweb-component

Capturing information from a modifiable table using Javascript

Creating an HTML Editable table with the property CONTENTEDITABLE, each TD has a unique ID (even though it's a long process and I only have basic JS knowledge) to keep track of the information inside. The table is wrapped by a form. At the end of the ...

javascripthtmljsonfirebasedom-events

Continuously encountering a Django form error stating "this field is required" despite completing the field

Just started working on a Django web app and I'm diving into Django forms. However, I keep encountering this error message despite entering the project name field. <tr><th><label for="id_title">projectName:</label>&l ...

pythonhtmldjango

Utilizing HTML5 data attributes to store intricate JSON objects and manipulate them using JavaScript

Recently, I encountered a unique challenge that I set for myself... I am currently in the process of developing an advanced ajax content loader plugin that comes with an array of options and callbacks. In order to streamline the initialization process and ...

javascriptjsonhtml

In a local setting, the KendoUI chips are displaying without their borders

I recently tested out the code from kendo on StackBlitz and it worked perfectly: https://i.stack.imgur.com/Nrp2A.png However, when running the same code on my localhost, all the styling for the chip is missing: https://i.stack.imgur.com/1pUH9.png The c ...

htmlcssangularkendo-ui