going in and out in the same way with transition custom effect

i got this CSS3 sheet and i have a little problem with it

i need to make it to go out in the same way it is going in, i mean look at it when it gonna drop dow

@-moz-keyframes custom_effect {
    0% { height: 60px;}
    100% {height: 225px;}
}
@-webkit-keyframes custom_effect {
    0% {height: 60px;}
    100% {height: 225px;}
}

ul#nav-drp li:hover {
    -moz-animation-name: custom_effect;
    -moz-animation-duration: 1.0s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 4;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: custom_effect;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 1;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

i can't make it go out in the same way it comes to go in, i tried to replace (-webkit-animation-timing-function: ease;) with (-webkit-transition: 1s ease-in-out;) but i didn't work could you please describe what was wrong?

Answers


Not sure if I understand your question correct, but when you say "go out in the same way it comes to go in" it sounds that you want it to animate back to height: 60px; when you hover out? If so, that won't be possible with keyframe animations. As soon as you hover out the animation will stop and the element will jump back to it's original state.

This is however possible to solve using transitions instead.

Here's a DEMO and here's the code from my example:

HTML

<div class="box"></div>​

CSS

.box {
    width: 100px;
    height: 60px;
    background: #005ca1;
    -webkit-transition: height 1s;
       -moz-transition: height 1s;
        -ms-transition: height 1s;
         -o-transition: height 1s;
            transition: height 1s;
}

.box:hover {
    height: 225px;
}

In this case I've set height as the property I want to transition with a duration of 1s; and I've added it to the element I want to transition, which will transition the height "both ways". In this case I've written the transition in short form, but for clarification the code in long form would look like this:

transition-property: height;
transition-duration: 1s;

It is also possible to add timing functions etc, but I tried to keep it simple in my example.

Hope that helps!


Try this...

transition-timing-function:linear;

try changing the transition-timing-function from ease to linear...

Because 'ease' property will have a slow start then little bit faster and at the end it will become slow again... so you wont get the same effect as going in and going out...

But, 'linear' property will have the same effect from start till end...

Might work...


Need Your Help

sql sequence id (nextval from dual) rollback

java oracle

i've created a sequence that automatically creates id, and i've specified it to start from a specific number, say 100.

How to import the own model into myproject/alembic/env.py?

python-3.x python-import alembic

I want to use alembic revision --autogenerate with my own model classes. Because of that I need to import them in myproject/alembic/env.py as described in the docs. But this doesn't work even if I ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.