jQuery to control CSS3 animation for an HTML form validation

Question

I am building a small plugin which validates a form. I am trying to add an animation which animates the input background from a white color to red (as a sign of warning). I am still new to CSS3 animations what's the best way of achieving a CSS3 animation which slides from left to right within the input field and from white to red?

The following adds the class for the animation to happen:

$(this).addClass('animationBG');

Then the animation itself is:

.animationBG{
    -webkit-animation-name: bgAnimation;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes bgAnimation {
  from {
    background-color:#fff;
  }

  to {
    background-color:red;
  }
}

Full code here.

I suppose you could animate the background-position of a background-image, but I don't see how you could animate a background color that way. — Blazemonger
– Blazemonger, Commented Mar 12, 2013 at 16:52
How about inserting a div on the top of each input with position absolute and animate its width? — Aessandro
– Aessandro, Commented Mar 12, 2013 at 16:54
I don't think it is possible to animate the background color like that. As Blazemonger said you could do it with an image. The other option might be a gradient and animating the stops, but this would be pretty tricky. — Jesse Kinsman
– Jesse Kinsman, Commented Mar 12, 2013 at 17:07
OK I guess I will have to play around with and find out what's the best solution, thank you guys.. — Aessandro
– Aessandro, Commented Mar 12, 2013 at 17:19

Jesse Kinsman · Accepted Answer · 2013-03-12 17:54:19Z

1

Here is a fiddle with a solution. This involves using a separate absolutely positioned div with transparency.

http://jsfiddle.net/jessekinsman/xywKm/3/

The HTML

    <div class="container">
    <div class="background">  
    </div>
    <input type="text" name="test" class="white" /> 
</div>

The CSS

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;

}
.container {
    width: 200px;
    height: 50px;
    overflow: hidden;
    position: relative;
}

.background {
    position: absolute;
    left: 100%;
    background: red;
    width: 100%;
    height: 100%;
    -webkit-transition: left 300ms linear;
    transition: left 300ms linear;
    opacity: 0.5;
    -webkit-opacity: 0.5;
    z-index:0;
}
.background.view {
    left: 0;
}

.white {
    background-color: white;
}
.red {
    background-color: red;
}
input {
    background-color: transparent none;
    width: 100%;
    height: 100%;
    z-index: 100;
}

jQuery just to add and remove the classes

$("input").focus(function(e){
    $(".background").addClass("view");
});
$("input").focusout(function(e){
    $(".background").removeClass("view");
});

Probably the best option unless you have some specific styling on your input element that you don't want to loose. Then you should use a background image.

Here is a link to that fiddle http://jsfiddle.net/jessekinsman/5aL4L/1/

Also wasn't sure if you wanted the animation to loop until some criteria is met. If that is the case, you should use the css transform option and have it loop until the criteria is met.

edited Mar 12, 2013 at 17:54

answered Mar 12, 2013 at 17:40

Jesse Kinsman

7722 gold badges10 silver badges21 bronze badges

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

2 Comments

Aessandro Over a year ago

Hi Jesse, thank you.. That looks pretty good... Eventually once the input has the right format whether is an email or postcode I would like ti slide back to white to confirm that the error has been fixed and the form is valid and ready to be sent through AJAX...

Jesse Kinsman Over a year ago

Yea I have it setup so that it removes the class on focus out but you could simply change the jQuery to remove the class when the validation has passed. I also added a fiddle with a image option.

Collectives™ on Stack Overflow

jQuery to control CSS3 animation for an HTML form validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related