我正在构建一个验证表单的小插件。我正在尝试添加一个动画,将输入背景从白色变为红色(作为警告标志)。我对 CSS3 动画仍然是新手,实现在输入字段中从左向右滑动并从白色到红色的 CSS3 动画的最佳方式是什么?
下面添加动画发生的类:
$(this).addClass('animationBG');
那么动画本身就是:
.animationBG{
-webkit-animation-name: bgAnimation;
-webkit-animation-duration: 3s;
animation-iteration-count: infinite;
}
@-webkit-keyframes bgAnimation {
from {
background-color:#fff;
}
to {
background-color:red;
}
}
最佳答案
这是一个带有解决方案的 fiddle 。这涉及使用具有透明度的单独绝对定位的 div。
http://jsfiddle.net/jessekinsman/xywKm/3/
HTML
<div class="container">
<div class="background">
</div>
<input type="text" name="test" class="white" />
</div>
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 只是添加和删除类
$("input").focus(function(e){
$(".background").addClass("view");
});
$("input").focusout(function(e){
$(".background").removeClass("view");
});
可能是最好的选择,除非您在输入元素上有一些您不想丢失的特定样式。那么你应该使用背景图片。
这是那个 fiddle 的链接 http://jsfiddle.net/jessekinsman/5aL4L/1/
也不确定您是否希望动画循环直到满足某些条件。如果是这种情况,您应该使用 css 转换选项并让它循环直到满足条件。
关于jQuery 控制 HTML 表单验证的 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15367248/