CODEWITHSUNDEEP
htmlcss
Mihir Ujjainwal
Mihir Ujjainwal

Reputation: 140

How to add animation to input placeholder

I'm making a search placeholder with which i want animation to be done. I tried , but it's not working.

My css codes are :

@-webkit-keyframes search_types {
from { width:0px;}
to {width:100px;}
}
.input_search_box::-webkit-input-placeholder{
   -webkit-animation: search_types 10s infinite linear;
}

I have tried many ways, transition works but i want to use animation for some other purpose , is there anyway way to do it.
I want to do a type animation like this in the placeholder

Upvotes: 4

Views: 5061

Answers (1)

Pik_at
Pik_at

Reputation: 1457

Very interesting post, i find a solution to put an :before content to the placeholder and make the animation on. The content are a blank box on absolute position at the right and we animate the width. So we can retrieve the behavior that you wanted I guess :

@-webkit-keyframes search_types {
    from {width: 100%;}
    to {width:0px;}
}

::-webkit-input-placeholder {
    position: relative;
}
::-webkit-input-placeholder:before {
    content: "";
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    right: 0;
    -webkit-animation: search_types 10s infinite linear;
}

Curiously we cant apply :before content ton input element but placeholder! Dont forget to apply the prefix for all support browser:

  • ::-webkit-input-placeholder
  • :-moz-placeholder
  • ::-moz-placeholder
  • :-ms-input-placeholder

http://jsfiddle.net/Pik_at/ky5g2n8r/

Upvotes: 2

Related Questions