CSS如何实现动画？

html-css039

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

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

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

可能是源代码问题，可以查看源代码，代码不多的，用手机和电脑浏览，注意那个充电头的动画。

1、最好加上浏览器兼容前缀 你的代码transition: all 5s linear 1s，如果你是用在webkit内核的浏览器，最好这样写：

-webkit-transition: all 5s linear 1s

transition: all 5s linear 1s

2、魅族note2上UC，火狐，chrome，魅族自带浏览器均有动画。只有手机Opera没有动画。可以试一下加上针对不同浏览器的css前缀补全。或者在meta里加上浏览器打开h5模式的标识。