CODEWITHSUNDEEP
csscss-transitions
Unix
Unix

Reputation: 2644

Why this CSS3 transition is not working when I unfocus an input? (:focus)

This is my CSS:

.light .contact_form_widget input:focus,.light .contact_form_widget textarea:focus,.light #commentform input:focus,.light #commentform textarea:focus,.light #contactform input:focus,.light #contactform textarea:focus{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-webkit-backface-visibility:hidden
}

Why this CSS transition is not working when I unfocus an input or a textarea? The transition works on links, image-hover-overlays...

[I removed the link, not needed for the question, it was only an example].

EDIT: This is the other part of the CSS (I didn't post it before, I don't know why, probably it was too obvious):

.light .contact_form_widget input:focus,.light .contact_form_widget textarea:focus,.light #commentform input:focus,.light #commentform textarea:focus,.light #contactform input:focus,.light #contactform textarea:focus{
background:#FFF;border:1px solid #BBB;
box-shadow:inset 0 0 5px rgba(0,0,0,0.13);
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.13);
-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.13)
}

Upvotes: 4

Views: 20504

Answers (1)

G.L.P
G.L.P

Reputation: 7207

Try like this Demo

CSS:

input[type=text]{
    background-color: #f2f2f2;
    border:1px solid #ccc;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
}

input[type=text]:focus {
    border-color: #777;
    color: #000;
    background: #fff;
    outline: 0
}

You need to give animation for normal state instead on focus

Upvotes: 13

Related Questions