transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。
可以使用CSS中的animation属性和@keyframes规则来实现图片自上而下落下来的动画效果。例如:# image {
position: relative//图片的相对位置
animation: falling 1s linear//动画名称为falling,持续时间1s,动画速度变化线性
}
@keyframes falling {
0% { top: 0px} //初始时图片位于顶部
100% { top: 300px} //最终时图片位于300px处
}
生硬的比较好的解决办法是调节整体帧数。当然在css中我们更习惯叫自定义动画:
@keyfame
keyfame可以尽最大可能帮你解决生硬的问题。里面可以内置百分比
这个是写了一个keyfame,精确到10%一次变动。看上去就不那么生硬了。你也可以试试。呵呵。但是 要记得配合animation一起使用哦