Javascript 使用css3转换字体大小和页边距

我正在尝试创建一个类似paytm登录字段的文本框。下面是我的代码：

$（.textBox input”）.on（“焦点”，函数（）{
$（“.placeholder”）.show（）；
$（“.placeholder”）.css({
“页边距顶部”：“0px”，
“字体大小”：“11px”
});
});
.textBox{
高度：50px；
}
.文本框输入{
边界：无；
边框底部：1px纯黑；
边缘顶部：20px；
}
.textBox输入：焦点{
大纲：无；
边框底部：1px实心#00B9F5；
}
.textBox输入：焦点：：-webkit输入占位符{
颜色：白色；
}
.占位符{
显示：无；
位置：绝对位置；
颜色：#00B9F5；
边缘顶部：20px；
-webkit转换：字体大小1s线性，页边距顶部1s线性；
}

输入您的姓名

$（.textBox input”）.on（“焦点”，函数（）{
$（“.placeholder”）.show（）.animate({
“页边距顶部”：“0px”，
“字体大小”：“11px”
}, 150);
});
.textBox{
高度：50px；
}
.文本框输入{
边界：无；
边框底部：1px纯黑；
边缘顶部：20px；
}
.textBox输入：焦点{
大纲：无；
边框底部：1px实心#00B9F5；
}
.textBox输入：焦点：：-webkit输入占位符{
颜色：白色；
}
.占位符{
显示：无；
位置：绝对位置；
颜色：#00B9F5；
边缘顶部：20px；
}

输入您的姓名

$（.textBox input”）.on（“焦点”，函数（）{
$（“.placeholder”）.show（）.animate({
“页边距顶部”：“0px”，
“字体大小”：“11px”
}, 150);
});
.textBox{
高度：50px；
}
.文本框输入{
边界：无；
边框底部：1px纯黑；
边缘顶部：20px；
}
.textBox输入：焦点{
大纲：无；
边框底部：1px实心#00B9F5；
}
.textBox输入：焦点：：-webkit输入占位符{
颜色：白色；
}
.占位符{
显示：无；
位置：绝对位置；
颜色：#00B9F5；
边缘顶部：20px；
}

输入您的姓名
您正在使用
-webkit-
前缀进行转换；这只适用于Chrome和Safari<代码>转换
现在已经得到了很好的支持


$（.textBox input”）.on（“焦点”，函数（）{
$（“.placeholder”）.css({
不透明度：1，
“页边距顶部”：“0px”，
“字体大小”：“11px”
});
$（this.attr（“占位符”）；
});
.textBox{
高度：50px；
}
.文本框输入{
边界：无；
边框底部：1px纯黑；
边缘顶部：20px；
}
.textBox输入：焦点{
大纲：无；
边框底部：1px实心#00B9F5；
}
.textBox输入：焦点：：-webkit输入占位符{
颜色：白色；
}
.占位符{
不透明度：0；
指针事件：无；
位置：绝对位置；
颜色：#00B9F5；
边缘顶部：20px；
过渡：.5s；
}

输入您的姓名
您正在使用
-webkit-
前缀进行转换；这只适用于Chrome和Safari<代码>转换
现在已经得到了很好的支持


$（.textBox input”）.on（“焦点”，函数（）{
$（“.placeholder”）.css({
不透明度：1，
“页边距顶部”：“0px”，
“字体大小”：“11px”
});
$（this.attr（“占位符”）；
});
.textBox{
高度：50px；
}
.文本框输入{
边界：无；
边框底部：1px纯黑；
边缘顶部：20px；
}
.textBox输入：焦点{
大纲：无；
边框底部：1px实心#00B9F5；
}
.textBox输入：焦点：：-webkit输入占位符{
颜色：白色；
}
.占位符{
不透明度：0；
指针事件：无；
位置：绝对位置；
颜色：#00B9F5；
边缘顶部：20px；
过渡：.5s；
}

输入您的姓名
非常感谢@VadimB！！现在工作我无法在某个时间点后加快转换速度。你知道怎么做吗？当然，我在这个答案中更新了代码。请再试一次。我使用150毫秒作为过渡期。如果需要更慢/更快，请设置自己的值。但是看起来不错：）非常感谢@VadimB！！现在工作我无法在某个时间点后加快转换速度。你知道怎么做吗？当然，我在这个答案中更新了代码。请再试一次。我使用150毫秒作为过渡期。如果需要更慢/更快，请设置自己的值。但是看起来不错：）这是有效的，但只有在文本最初可见时才有效。如果它最初是隐藏的，并且我们在文本框的焦点上显示它，那么它就不工作了。这是工作的，但只有当文本最初是可见的。若它最初是隐藏的，并且我们在文本框的焦点上显示它，那个么它就不工作了