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

所有案例的效果图：

详细代码：https://download.csdn.net/download/Lhy_JL/15544748

用到的素材背景：

bear小熊图片，

所应用到的知识：

• 定义动画 当只有有两阶段时也可以  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 ;

需要源代码以及疑惑的，欢迎call我。