html+css3应用animation制作动画效果（跳动的熊）

html+css3应用animation制作动画效果（跳动的熊）

所需素材

素材：

animationx

1.是css3新增的属性，由于动画效果

2.动画是使元素从一种样式逐渐变化为另一种样式的效果。

3.可以改变任意多的样式任意多的次数。

4.用关键词 "from"是开始 和 "to"是结束或 0%是的开始，100% 是的完成。。

html,css代码

/*css代码*/<style>* {margin: 0;padding: 0;}/* 背景颜色 */body {background-color: #ccc;}.bear {/* 图片可见宽高 */width: 200px;height: 100px;/* url添加图片，no-repeat让图片不平铺 */background: url(images/bear.png) no-repeat;/* animation动画属性设置：bear是绑定到选择器的 keyframe 名称，.4s为动画完成一个动作的时间，steps(8)把动画分为8部分运行，infinite无限播放逗号分隔可以写多个 */animation: bear .4s steps(8) infinite, mo 1s forwards;margin: auto;}@keyframes bear {/* 起始图片位置为0，0 */0% {background-position: 0 0;}/*动画完成一次循环到最后图片位置为-1600px，0 */100% {background-position: -1600px 0;}}@keyframes mo {0% {left: 0;}100% {left: 50%;}}</style>/* html代码*/<div class="bear"></div>

以上是html+css3应用animation制作动画效果（跳动的熊）的代码，如果有什么不懂的可以评论或者私聊我，我为你解答，若是发现有错误，请指出谢谢，希望你们年薪过百万。