CSS animation介绍+大数据热点图案例+打字机显示案例+奔跑的小熊案例

所有案例的效果图：

 小熊背景图素材：

剑客背景图素材：

 

热点图背景素材：

 

所用到的知识：

• 定义动画 当只有有两阶段时也可以  0%==from ， to == 100%

@keyframes 自定义动画的名称{

         0%{} 

         ........//中间可以0~100的整数值，成序列，

         100%{} 

    }

• 调用动画：animation-name：自定义动画的名称；
• 设置动画持续的时间：animation-duration：2s；记得带单位
• 运动的时间曲线animation-timing-function：ease；（默认）
• animation-delay：1s ；延后1s开始执行动画
• animation-iteration-count：整数/infinite；整数或者无限循环
• animation-direaction：normal / altermate；结束的时候是否倒放
• animation-play-state:running / pause；一般应用在鼠标放上去，动画就停止播放
• animation-fill-mode：forward / backward；动画结束状态，保持==forward，回到初始==backward

当然animation 属性也可以简写：

 推荐顺序：

• animation：name  动画所需时间 延迟时间 (后面的顺序随意，不需要的可以省略)

• animation: name1 2s linear alternate  infinite;

多个动画用逗号 "," 隔开

• animation：name1 2s linear alternate  infinite,name2 2s ;

 

<