最近在项目中，产品经理要求实现input框的一种特效，由于这个页面是用vue写的，所以就在github上找有vue有关这方面的组件，结果引入之后就出现了很多问题，首先这个vue项目用的ui框架是饿了吗开发的Mint UI，里面没有这种效果，然后又借鉴了一下vonic这个ui框架，但是引入的时候有些不兼容。无奈之下就自己写了一下这个特效，顺便又学习了一下动画效果。
其实最主要用到css3的动画特性是transition。那我们先介绍一下transition这个动画属性，transition的属性主要是（介绍截自w3c）
语法 transition: property duration timing-function delay;
**值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。**
好了，下面是更为详细的介绍：
过渡属性
【1】transition-property：
规定应用过渡效果的 CSS 属性的名称（当指定的CSS属性改变时，过渡效果开始），其默认值为 all 。
【2】transition-duration：
规定完成过渡效果需要的时间（单位为 s 或 ms），其默认值为 0s ，意味着如果不指定这个属性，将不会呈现过渡效果。
【3】transition-timing-function：
规定过渡效果的时间曲线。
默认 ease ：慢速开始，中间变快，慢速结束；相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。
可选 liner：匀速运动；相当于 cubic-bezier(0, 0, 1, 1)。
可选 ease-in：慢速开始；相当于 cubic-bezier(0.42, 0, 1, 1)。
可选 ease-out：慢速结束；相当于 cubic-bezier(0, 0, 0.58, 1)
可选 ease-in-out：慢速开始，慢速结束；相当于 cubic-bezier(0.42, 0, 0.58, 1)
可选 cubic-bezier(n, n, n, n)：在 bezier 函数中自定义 0 ~ 1 之间的数值。
贝塞尔时间曲线详解。。。
【4】transition-delay：
规定过渡效果的延迟时间，默认为 0s 。
复合属性
在使用复合属性定义过渡效果时，子属性之间用空格分隔。
transition: width 2s linear;
transition 属性可以指定多个值，当指定多个值时，中间用逗号分隔。
transition: width 2s ease-in-out, height 2s ease-in-out;
其中过渡过程中还有很多情况，具体请见最后的参考链接，很不错的一篇文章
好了，以上是总结的一些基础知识，下面是具体的运用
项目中的要求是点击input框，input框中的提示语也就是placeholder的值上移，变成
这样的样式了，
这是在vue项目中写的，
html
<div class='xuan-input'>
<span :class="dutyAct">职位</span>
<div class='input-label'>
< input @keyup="input" @blur="blur('duty')" @focus="focus('duty')" v-model="duty" placeholder="职位" type=“text” maxlength=“50”/>
<i v-if="false" @click="clearInput('duty')"></i>
</div>
</div> css
.xuan-input{
padding:15px 0px;
width:100%;
height:75px;
background-color:#fff;
display: inline-block;
position: relative;
border-bottom: 0.5px solid #e6e6e6;
span{
padding-top:2px;
font-size:16px;
line-height:20px;
font-weight:400;
position:relative;
padding:5px 0 0;
opacity: 0;
top: 10px;
display: inline-block;
color: #aea9a5;
font-size: 14px;
&.active{
transition:opacity 0.15s ease-in, top 0.2s linear;
opacity: 1;
top:0;
}
}
..input-label{
display:inline-block;
position: relative;
width:100%;
input{
display:block;
padding-top: 2px;
pading-left:0;
height:34px;
color:#111;
width: 90%;
font-size: 16px;
line-height:16px;
}
i{
position:absolute;
top: 7px;
right: 0;
z-index:3;
width: 24px;
height: 24px;
background-image:url();
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: 5px 5px;
}