CSS如何实现动画?

html-css021

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

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

transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。

生硬的比较好的解决办法是调节整体帧数。当然在css中我们更习惯叫自定义动画:

@keyfame

keyfame可以尽最大可能帮你解决生硬的问题。里面可以内置百分比

这个是写了一个keyfame,精确到10%一次变动。看上去就不那么生硬了。你也可以试试。呵呵。但是 要记得配合animation一起使用哦