How To Make Something Disapear In Css Using Animation

Equally web pages get more active and dynamic, we desire content to appear and disappear at volition. There are four CSS properties normally used to reach this.

Each technique has its uses, along with its own advantages and disadvantages. It's also common to apply more one technique at the same time; where appropriate, I have linked to examples.

I'll be applying the CSS in each example to the same basic lawmaking:

          <p>Dice used for traditional Dungeons &amp; Dragons games are actually reflections of the five Platonic solids: the tetrahedron (4 sided dice), octahedron (8 sides), dodecahedron (12)and icosahedron (twenty sides). <img src="die.jpg" alt="Photograph of metallic dice" id="die"> <p>The die are used to determine the attributes of characters,  and the graphic symbol'southward success or failure in undertaking tasks, challenges, casting spells, attacks and defences.        

The original CSS applied to the epitome:

          img#dice { 	float: right; 	margin-left: 2em; }        

The techniques are:

visibility: hidden

          img#die { 	float: right; 	margin-left: 2em; 	visibility: hidden; }        

The obvious choice, and oft the first employed. It works – you tin can't see the influenced chemical element – simply the rest of the page still acts like the element is there; it is simply treated as beingness invisible, while taking upward space.

Used for: "popping" elements in and out of existence, when an animated transition effect is non required.

Countered by: setting the element to visibility: visible.

opacity: 0

          img#dice { 	float: right; 	margin-left: 2em; 	opacity: 0; }        

Setting opacity to 0 causes an chemical element to be invisible, in the exact same fashion that visibility: hidden does. opacity the advantage that, unlike visibility, it can exist transitioned and animated .

Used for: creating "fade in" and "fade out" furnishings.

Countered by: setting the chemical element to opacity: 1 (or any value greater than 0).

position: absolute

          img#dice { 	position: absolute; 	left: -1000px; }        

The oldest and well-nigh standardized of the techniques. Takes the chemical element out of the flow of the folio, causing information technology to layer above ordinary content. Using a high negative left value takes it off the folio entirely.float and margin are irrelevant with position: absolute, and then they are removed.

Used for: Linear animation; "pop" placement of elements with the greatest compatibility betwixt browsers.

Countered by: setting the left position to a value that allows the chemical element to be seen on the folio.

display: none

          img#dice { display: none; }        

The 2nd-oldest of the techniques. Might be thought of as a compromise between position: absolute and visibility: hidden; the element is both invisible and no longer influences other content on the page.

Used for: stylesheets for alternative media, to eliminate inappropriate content; as a style of "collapsing" content around an element that will be "pushed" when it re-appears, every bit in an accordion menu.

Countered by: setting the element to display: cake or any other value.

There are other ways of making elements vanish – for case, you could use scale to diminish the apparent size of an element until it is invisible – but on the whole they take the same effect as those I have described here. (calibration will retain the original infinite of the element, just equally opacity: 0 and visibility: hidden practice).

Photo past Phil Long, used under a Creative Eatables Attribution ii.0 Generic license

Bask this piece? I invite y'all to follow me at twitter.com/dudleystorey to acquire more.

Source: http://thenewcode.com/304/Four-Ways-to-Make-Elements-Disappear-and-Reappear

Posted by: warelosione.blogspot.com

Share this post