Would like to know how to hide an div after a set of css3 animation. Here's my code:
html
hover me
css3
#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; }
}
Here's the jsfiddle sample for better illustration:
Any idea how to do hide the box permanently, best without javascript?
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
more