CODEWITHSUNDEEP
jquerycss
Fabián
Fabián

Reputation: 575

Fade out a CSS3 animation

The idea is to fade out only the animation itself, after you stop hovering the .item (not the entire item).

I've tried the following CSS:

.item{
    box-shadow: 2px 2px 6px rgba(0,0,0,.5);
    -webkit-transition: -webkit-animation 1s;
    -webkit-animation: none;
}

.item:hover{
    -webkit-animation: party_nav_alt2 1s infinite linear;        
}

@-webkit-keyframes party_nav_alt2 {
    0% {box-shadow: 0 0 8px 3px red;}
    20% {box-shadow: 0 0 8px 3px yellow;}
    40% {box-shadow: 0 0 8px 3px cyan;}
    60% {box-shadow: 0 0 8px 3px #7700ff;}
    80% {box-shadow: 0 0 8px 3px white;}
    100% {box-shadow: 0 0 8px 3px red;}
}

But it didn't work.

Solutions with jQuery are also welcome.

EDIT: The following is a demo to see what I mean. It does the effect but always fades out with a red color:

jsFiddle

EDIT 2: This is the effect that I was looking for.

Upvotes: 3

Views: 742

Answers (3)

Zach Saucier
Zach Saucier

Reputation: 25944

Currently I believe this is impossible without adding another element.

However if you are willing to add another (invisible) element, you could do something like this, which toggles the opacity of an element the same size and position with the animating shadow on hover

.item{
    height: 100px;
    width: 100px;
    background: gray;    
}
.animation {
    box-shadow: 2px 2px 6px rgba(0,0,0,.5);
    -webkit-transition: -webkit-animation 1s linear ease-out;
    -webkit-animation: none;
    transition: all 0s ease-out;
    width:100%;
    height:100%;
    background:transparent;
    transition: all 1s ease-in; 
    -webkit-animation: party_nav_alt2 1s infinite linear;
    opacity:0;
}
.animation:hover{
    opacity:1;
}

Upvotes: 1

Jack
Jack

Reputation: 1941

I'm not too sure i understand the question, if you could post a jsfiddle or some more code that would be very helpful. But going what you've said i have an option which may be of interest using:

A little Jquery 

$( ".item" ).mouseover(function() {
    $( this ).fadeIn( 2000 );
});

$( ".item" ).mouseleave(function() {
    $( this ).fadeOut( 2000 );
});

"2000" being 2000ms which is equal to 2 seconds; you can adjust at your leisure.

Check it out here

OR CSS

.item {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;

}

.item:hover {
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
}

Check it out here

Upvotes: 1

wener
wener

Reputation: 7740

How about

.item{
    transition: all 400ms ease-out; 
    box-shadow: 0 0 8px 3px red;
    border: 2px solid red;
}
.item:hover{
    transition: all 200ms ease-in; 
    box-shadow: 0 0 8px 3px #7700ff;
    border: 2px solid #7700ff;
}

you can change the property as you need.

see this http://jsfiddle.net/FPLjM/

Upvotes: 0

Related Questions