CODEWITHSUNDEEP
htmlcss
TonyTakeshi
TonyTakeshi

Reputation: 5929

Hide div after CSS3 Animation

Would like to know how to hide an div after a set of css3 animation. Here's my code:

#box {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 200px;
  height: 150px;
  background-color: red;
}

#box:hover {
  -webkit-animation: scaleme 1s;
}

@-webkit-keyframes scaleme {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(3);
    opacity: 0;
    display: none;
  }
}
<div id='box'>
  hover me
</div>

Here's the jsfiddle sample for better illustration:

http://jsfiddle.net/mochatony/Pu5Jf/18/

Any idea how to do hide the box permanently, best without javascript?

Upvotes: 21

Views: 52630

Answers (4)

NicB
NicB

Reputation: 362

Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:

div.container {
transform: scale(0);
-webkit-transform: scale(0);
}

or

div.container {
opacity: 0;
}

Once the animation is completed, the div will go back to its original CSS, which is hidden.

Upvotes: 3

Ian Devlin
Ian Devlin

Reputation: 18870

Change your animation definition to:

-webkit-animation:scaleme 1s forwards;

This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.

Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.

Upvotes: 9

madr
madr

Reputation: 665

That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.

By doing this, the animation never ends and therefore stay in shape.

#box:hover {
  -webkit-animation:scaleme 1000s;
}

@-webkit-keyframes scaleme {
  0% { -webkit-transform: scale(1); opacity: 1; }
  0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}

1000s is not necessary in this particular example though. 10s should be enough for hover effects.

It is, however, also possible to skip the animation and use basic transitions instead.

#box2:hover {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;  
  -moz-transform: scale(3);
  -webkit-transform: scale(3);
  opacity: 0;
}

I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/

(I also added -moz- since there is no reason not to. -o- or -ms- might also be of interest).

Upvotes: 1

antyrat
antyrat

Reputation: 27765

Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).

But you can try to play with -webkit-animation-fill-mode property.

For example:

#box:hover{
  -webkit-animation:scaleme 1s;
  -webkit-animation-fill-mode: forwards;
}

It's at least not immediately return a box to display:block; state.

Using JavaScript you can do this by using webkitAnimationEnd event.

For example:

var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);

Example on jsFiddle

Upvotes: 17

Related Questions