原文是一个对话框掉落, 我给简化成一个文本框了.
html 代码
<input class="inputClass" id="dropInput"/>
- .inputClass{
- display:block;
- position:absolute;
- width:80%;
- height:30px;
- left:50%;
- top:40%;
- -webkit-transform:translate(-50%,-50%);// 居中
- }
- // 定义动画
- @-webkit-keyframes input-in{
- 0% {top:0;}
- 45% {top:40%;}
- 70% {top:27%;}
- 80% {top:35%;}
- 100% {top:40%;}
- }
- .animation-in{
- display:block;
- -webkit-animation:input-in 0.5s cubic-bezier(0.215, 0.610, 0.555, 1.000);
- }
js 代码: 添加带动画效果的类 animation-in,
javascript 代码
- window.onload = function(){
- var c = document.getElementById("dropInput");
- c.className = "inputClass animation-in";
- }
这里有个问题是: 为了使动画流畅, 相对应的百分比和时间函数不知道怎么定的...... 我是凭感觉改的
为了方便以后改的时候变成原创笔记而弄丢了原文, 特地放参考原文连接在此 http://blog.csdn.net/qq_21058391/article/details/52495798
来源: http://www.qdfuns.com/article/14880/62cb24ff97bee76da4e3033537bb8605.html