动画效果

css可以控制给元素添加动画效果，一个元素可以添加多个动画，只要将不同的动画效果用逗号分割就行。

（此图和代码来源：pink老师课程，以备后续使用。）

 

以上是效果图，小熊从头跑到屏幕中间在中间奔跑。一共包含两个动画效果。一个是小熊的奔跑，一个是小熊从屏幕左边到中间的过程：

div{

position:absolute;

width:200px;(看具体小熊图片的高度和宽度)

height:100px;

background:url(*/*.png） no-repeat;

animation:bear 1s steps(8) infnite,move 3s forward;

}

@keyframes bear{

0%{background-position:0 0;

}

100%{

backfround-position:-1600px 0;

}

}

@keyframes move{

0%{

left: 0;

}

100%{

left:50%;

//margin-left:-100px;

transform:translateX（-50%）

}

}