CSS如何实现动画?

html-css012

CSS如何实现动画?,第1张

创建动画序列,需要使用animation属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现,具体情况参见使用keyframes定义动画序列小节部分。

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一起使用哦