Question

网上有人说用css做动画，我很好奇怎么做

把鼠标放到字上面，字往下滑大约100px，这个下滑过程是缓慢的很优美，不是突然就掉下去的

Answer 1

其实css3有两种方式实现这个效果：

1. css3 过度transition

.class{
position:relative;
-webkit-transition: top 10s linear; /*top 时间（用秒计算）s linear;*/
-moz-transition: top 10s linear;
-o-transition: top 10s linear;
transition: top 10s linear;
}
.class:hover{
top:100px;
}

详见：http://www.w3school.com.cn/css3/css3_transition.asp

2. css3 动画animation

@-webkit-keyframes myfirst{
from {top: 0;}
to {top: 100px;}
}
@-moz-keyframes myfirst{
from {top: 0;}
to {top: 100px;}
}
@-o-keyframes myfirst{
from {top: 0;}
to {top: 100px;}
}
@keyframes myfirst{
from {top: 0;}
to {top: 100px;}
}
.class{
position:relative;
}
.class:hover{
-webkit-animation:myfirst 10s;
-moz-animation:myfirst 10s;
-o-animation:myfirst 10s;
animation:myfirst 10s;
}

详见：http://www.w3school.com.cn/css3/css3_animation.asp

Answer 2

利用css3可以实现一些动画 或者是html5里的canvas作画布

Answer 3

css3有这种效果，不过很多浏览器不支持。

Answer 4

利用 CSS3 animation 可以实现一个，实现的方法很多，这只是其中之中，具体效果见附件。

因为鼠标移上去要滑动100px ，所以，鼠标移上去就不要动了，它会慢慢向下滑100px。滑快滑慢。这种可以自己改了。

示例在  firefox 和 chrome 浏览器测试有效，IE什么的先不管了，主要是看方法， IE 可以自己去完善。