Hiding an element after transition using CSS only

Question

I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.

Background: I originally copied this idea from here: original form.

Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).

Now here's my demo:

My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).

So the code that's relevant to this problem is as follows.

The HTML code:

<button class="login-button"><span>SEND</span></button>

The CSS code:

.login-button{
    width: 100%;
    outline: none;
    border:none;    
    cursor: pointer;
    padding: 0;
    margin:0;
    transition:.3s;
}

.login-input , .login-button{
    height: 50px;
    line-height: 40px;
    transition:.3s;
}

.login-button span{
    display: block;
    background:red;
    height: 100%;
    width: 100%;
    left: 0;
    transition:.3s;
    position: relative;
}

.login-button span:before{
    content: 'ok';
    position: absolute;
    left: 100%;
    display: block;
}

.login-button:hover span:before{
    content: 'OK To go now';
    position: absolute;
    /*left: 0%;*/
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
}

Now if I go to the CSS styling for the main container:

I.E.

 .main-login{
    min-width: 200px;
    max-width: 400px;
    background: #533e69;
    margin: 100px auto;
    text-align: center;
    overflow: hidden;
    box-shadow: 1px 1px 10px rgba(0,0,0,.2);
    padding: 0 20px;
}

and take off the padding, then the problem is solved and the transition looks perfect.

The problem

My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.

Proposed solution

I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.

I am new to CSS, so my solution may be less elegant:

When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.

You either have to solve it completly in css, or completly in JavaScript. Making a transition with css and hiding it with JS doesn't work, since there are no events when the transition finished. I can't help you with the css though — maja
– maja, Commented Dec 21, 2014 at 18:42
@slime not really , i already have that property on the main container , and when the span goes left:-100% , its still inside the main container. — Alexander Solonik
– Alexander Solonik, Commented Dec 21, 2014 at 18:43
You need transition-delay: 0.3s; in combination with transition: 0s; and opacity: 0; (you can't make a transition to the display or overflow-property) — maja
– maja, Commented Dec 21, 2014 at 18:47
@maja not sure about transition-delay but opacity should work , Thanks . Though , that would't be totally elegant ! , i am trying to create a custom animation , will post an update if successful . just going to the mart , hope somebody can answer this question by the time i comeback :) — Alexander Solonik
– Alexander Solonik, Commented Dec 21, 2014 at 18:51

maja · Accepted Answer · 2014-12-21 18:59:44Z

2

You need to set the background to be transparent. It's not possible for a transition to animate the display property.

Add this css code, and it should work:

.login-button:hover span{
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
    transition: 2s;
    background: rgba(1,1,1,0);
}

See your updated fiddle here.

Edit: I cleaned up the css a bit:

.login-button:hover span{
    transition: 0.3s;
    background: transparent;
}

Fiddle is here.

edited Dec 21, 2014 at 18:59

answered Dec 21, 2014 at 18:53

maja

18.2k18 gold badges85 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Solonik Over a year ago

thats really close to what i want , i played around with the fiddle you provided a bit , and yes it can be tuned to what i want , though a look at the original , reveals a few differences patterntap.com/pattern/login-noun-project. nvm , i'll accept your answer , after a while , if i fail in finding a better way . thanks :)

Ajmal Jamil · Accepted Answer · 2014-12-21 18:50:54Z

1

Transition properties are comma delimited in all browsers that support transitions:

.nav a {
  -webkit-transition: color .2s, text-shadow .2s;
  /* And so on... */
}

Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;

Or try this
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;

This is the link

answered Dec 21, 2014 at 18:50

Ajmal Jamil

8291 gold badge9 silver badges15 bronze badges

1 Comment

Alexander Solonik Over a year ago

i am skeptical of your answer , i'll try it though . Thanks :)

Collectives™ on Stack Overflow

Hiding an element after transition using CSS only

The problem

Proposed solution

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The problem

Proposed solution

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related