上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d、3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明。
首先我们需要了解css3中动画的意思,明了的意思就是能动态显示的页面效果,
而使用动画,有两种实现方法(js实现动画,css3实现动画)****css动画与js动画的区别
本篇主要说明css动画的实现。
哈,真的是超详细了,有兴趣的小伙伴,可以看看,如果有html基础的可以扩展,因为属性介绍相对较全。
动画两大实现步骤
关键帧@keyframes
不同于过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧的话来说,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。
关键帧的定义
@keyframes mymove{
from{
初始状态属性}
to{
结束状态属性}
}
或
@keyframes mymove{
0%{
初始状态属性}
50%(中间再可以添加关键帧)
100%{
结束状态属性}
}
调用关键帧animation
一般使用都是简写,
animation:动画名 执行时间 执行函数;
下面是animation详细属性值的介绍,内容较多
animation-name:动画名称
- 检索或设置对象所应用的动画名称
- 必须与规则@keyframes配合使用,
eg:@keyframes mymove{
} animation-name:mymove