jQuery带动画效果的CSS3表单输入框验证代码

html,
身体 {＃＃＃   背景颜色：#F4F4F4;
  显示：柔性；
  宽度：100%；
  高度：100%；
  对齐项目：中心；
  字体系列：“Work Sans”，无衬线；
  调整内容：中心；
}

.exp-容器 {
  宽度：100%；
  内边距：30px；
  框大小：边框框；
  最大宽度：600px；
}

.exp {
  显示：柔性；
  弯曲方向：列反向；
  宽度：100%；
  下边距：30px；
  位置：相对；
  弹性包裹：包裹；
}

.exp__标签 {
  过渡：0.3s；
  下边距：5px；
}

.exp__label:在{
之前   内容：attr(数据图标);
  字体粗细：正常；
  字体系列：“离子”；
  字体大小：24px;
  位置：绝对；
  左：0；
  变换：rotateY(90deg);
  底部：0；
  高度：52px；
  背景：透明；
  颜色：#000;
  变换原点：左；
  显示：柔性；
  对齐项目：中心；
  调整内容：中心；
  过渡：颜色 .3s 0s 缓动，变换 .3s 0s 缓动；
  宽度：42px；
}

.exp__input {
  边框：1px实线#ddd;
  填充：0 10px;
  宽度：100%；
  高度：52px；
  过渡：0.3s；
  字体粗细：正常；
  框大小：边框框；
  字体系列：“Work Sans”，无衬线；
  大纲：无；
}

.exp__input:焦点{
  左内边距：42px；
  边框颜色：#bbb;
}

.exp__input:焦点标签:在{
之前   变换：rotateY(0deg);
}

.exp__input:有效{
  左内边距：42px；
  边框颜色：绿色；
}

.exp__input:有效标签{
  颜色：绿色；
}