小熊奔跑动画（CSS3）

动画（animation）是CSS3具有颠覆性的特征之一，可以设置多个节点来精确控制一个或一组动画。

一.基本使用

1.定义动画：
用@keyframes定义动画

@keyframes 动画名称{
	0%{
	width:100px;
}
	100%{
	width：200px;
}

2.使用调用动画：
调用动画
animation-name:动画名称；
持续时间
animation-duration：持续时间；

二.属性介绍

@keyframes:规定动画。
animation：所用动画属性简写，除了animation-play-state属性。
animation-name:规定动画@keyframes动画名称。
animation-duration：规定动画完成一个周期所花费时间，默认为零。
animation-tining-function：规定动画曲线，默认为ease。
animation-delay：动画何时开始，默认为0。
animation-iteration-count：规定动画播放次数，默认为0，还有infinite（无限）。
animation-direction:规定动画是否在下一周期逆向播放，默认“normal”，alternate逆向播放。
animation-play-state：规定动画是否正在运行或暂停，默认“running”，还有“pause”。
animation-fill-mode：规定动画结束后的状态，保持forwards,回到起始backwards。

三.小熊代码演示

    
    
    
    



    





图片网址来自博客“周皮皮皮皮皮皮”；
https://github.com/Zhoupipipipipipi/Svg/blob/master/image/bear.png?raw=true