CSS3 Animation：background-image

对CSS3的强大一如既往的自信，自己在倒腾一个用例，就是一朵白云的两个表情切换，想想很容易实现吧，在PC上也是如此，

用两个keyframes就搞定了。

代码示例：

view sourceprint?

01	.cloud.large{

02	width: 138px;

03	height: 46px;

04

background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');

05	-webkit-animation: large 3s ease infinite;

06	animation: large 3s ease infinite;

07

}

08	@-webkit-keyframes large{

09

50% {

10

background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAe1BMVEUAAAD///////////////////////////////////////////////////////////+RNzuZRUmhU1eoYmWwcHO4foHAjY/HFh7Im53LJSzQqavSQkjVUFbZX2TcbXLji4/nmZ3n1NXqqKvv4uP109X38fH44uP88PH///8OmAEfAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAZ9JREFUWMPNlu2WgiAQQEP8QETIat2tbT9ct5r3f8LN1TpaYJQE3D/RHH/cMwMzM5tNB4VHgpljcJLl0MEZCV15BITDBYK6sMEUpPDYdkYUIg251cwkAsZIkS0RlMENOLZkksNNhJUbgwXoYMEl0DOx4KJTnQ7WSguWRk9RYfAIgpq/xwk8CjM8pQKYAPGgPOc2bLDzhTANgT1JikmXqUlpXAzVaGQab5aLxdtOI5yb6W7KPrsryhp2m3klC5fDsJF3FClzUmz+f6p5PQxXXXiQF/3+giJyJJGsP6myOqvLQ/uvPB1e+mGq6RHn6jVVOX1W5woU/fCylob10hKL614dJoQylpIYK+uz6p++Ova98BLuTMv1cibS7O7nun5t2asftMnxP8Zna7Id+SRDVkzg8N6YrH8nrJsUTPHzsf0+3PiGPrep38WIC7esou66EVgnfPpN0V+kFCrCvgpE5nfWR8m8eD8tyB8V2cVFxIlK3jR4nvYnNebglMRxdWStFwnnKqd3Td2bAHfX3eRpCX0waYejHyrMM5WA+MCx8f4ByS0/Tk6yxsIAAAAASUVORK5CYII=');

11

}

12

100% {

13

background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');

14

}

15

}

16	@keyframes large{

17

50% {

18

background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAe1BMVEUAAAD///////////////////////////////////////////////////////////+RNzuZRUmhU1eoYmWwcHO4foHAjY/HFh7Im53LJSzQqavSQkjVUFbZX2TcbXLji4/nmZ3n1NXqqKvv4uP109X38fH44uP88PH///8OmAEfAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAZ9JREFUWMPNlu2WgiAQQEP8QETIat2tbT9ct5r3f8LN1TpaYJQE3D/RHH/cMwMzM5tNB4VHgpljcJLl0MEZCV15BITDBYK6sMEUpPDYdkYUIg251cwkAsZIkS0RlMENOLZkksNNhJUbgwXoYMEl0DOx4KJTnQ7WSguWRk9RYfAIgpq/xwk8CjM8pQKYAPGgPOc2bLDzhTANgT1JikmXqUlpXAzVaGQab5aLxdtOI5yb6W7KPrsryhp2m3klC5fDsJF3FClzUmz+f6p5PQxXXXiQF/3+giJyJJGsP6myOqvLQ/uvPB1e+mGq6RHn6jVVOX1W5woU/fCylob10hKL614dJoQylpIYK+uz6p++Ova98BLuTMv1cibS7O7nun5t2asftMnxP8Zna7Id+SRDVkzg8N6YrH8nrJsUTPHzsf0+3PiGPrep38WIC7esou66EVgnfPpN0V+kFCrCvgpE5nfWR8m8eD8tyB8V2cVFxIlK3jR4nvYnNebglMRxdWStFwnnKqd3Td2bAHfX3eRpCX0waYejHyrMM5WA+MCx8f4ByS0/Tk6yxsIAAAAASUVORK5CYII=');

19

}

20

100% {

21

background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');

22

}

23

}

view sourceprint?

1	<div class="cloud large"></div>

以上代码在PC上用chrome测试妥妥的，效果还可以，直接用手机连wifi一看，完全一个静态表情啊，切到Android版的chrome

也是妥妥的，哎，这尼玛又被坑了。

后来在网上查了一下，发现background-image的“Animatable:no”

While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says “Animatable: no” for

background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary.

Until widespread support arrives this can be faked via image sprites and background-position or

opacity.

引文出自：http://oli.jp/2010/css-animatable-properties

好吧，找到方向了，开始动手。开始尝试一下background-position来切换，结果不理想，只看到两个背景用位移来切换的，

一个跑马灯的效果，代码就不列举了。

继续折腾，用JS来处理，看着一堆代码，想着就麻烦。推翻重来，回到HTML和CSS上，经过一翻调整，终于整出来了在chrome

上直接用background-image的效果，分两步：

1. 调整HTML结构，给原来HTML元素增加一个子元素
2. 调整CSS，控制新增子元素的opacity值

 

代码示例：

view sourceprint?

01

.cloud{

02	position: absolute;

03	width: 100%;

04	height: 100%;

05	background-color: transparent;

06	background-repeat: no-repeat;

07	background-position: 0 0;

08

}

09	.cloud .switch{

10	width: 100%;

11	height: 100%;

12	opacity: 0;

13	-webkit-animation: switch 2s ease infinite;

14	animation: switch 2s ease infinite;

15

}

16	@-webkit-keyframes switch{

17

50% {

18	opacity: 1;

19

}

20

100% {

21	opacity: 0;

22

}

23

}

24	@keyframes switch{

25

50% {

26	opacity: 1;

27

}

28

100% {

29	opacity: 0;

30

}

31

}

32	.cloud.large, .cloud.large .switch{

33	width: 138px;

34	height: 46px;

35

background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARQAAAAuCAMAAADeOBY0AAAAflBMVEUAAAD///////////////////////////////////////////////////////////////+RNzuZRUmhU1eoYmWwcHO4foHAjY/HFh7Im53LJSzQqavSQkjVUFbZX2TcbXLji4/nmZ3n1NXqqKvv4uP109X38fH44uP88PH///8stMF9AAAAEXRSTlMAABAgMEBQYHCAj5+vv8/f7/4ucL8AAAMqSURBVGje7ZrbeuIgFEYrhxCScOhpnNaxddpO637/F5yoSY0RTBACueh/Y8qF33JtILC/3iwWN97BtA7y/JIQIGgHgv1BPFkoFwqayConyaSQvJItiBKcJpNCSg29qAInkIK56oPokqaQkgkwRtDIUkhpBlEsthRqUbJLhSNKwaUdRNKYUlABl6LzaFJyfZGkQNGkEAkDESiKFFQNgSgSSQrRAMFhrgFBchhEsyhSGIyJJpNLGVOcOiyClAxgCivuIFiPJGGTSyFjUUCL77MUmUDKmLXT7nC6ASqySaQgBddEcRxairgKRJckvJQKrs3A29EVJL8aRODAUhhcH50FlII9QIAHlYK0DwuU4aQILxCJAkrhAFPBuIFQT5ALr0ZXKZ4T5aIVNykCJrPiKsV3oux2uSBSqD+IRoGkKH8WKEJIuXAzXj3c3z99jhiWYaQQCBHqL8W+jD/vlh/wubp9Mw0vT4d5EClFECnKX4r9pnG32n+83X6cDr81wydzBY+XghmvwwwbkQwiBfKRUlC2A8mpQ3VWj/2Hw1/L9uHX8AnhXEqn23nWbkVhnFimSg8EMWlvt1qr8/i9Pu66ww8fxmHzVOlLQVyfncwR5bwSgvPMfpqtN7EmS/Pw0/Ct9VQK0+cnc5rzUoiinsRWkMfu06bJV2f4Yfgw2ZNy3lBTPNCSOe3hDkk5b6jpwv3S9fz7kC/7a3lYCtEBfvDX5jtud48OCApTideDk/Wl8qABKUGcwPalqc/zxq1ZeQQJ5AS2f/Yc/xyblV0poVDqufKyXr++bx27YUcpZbB1+v6y/rt1vaR2pXCIG2aTQiODlHYpGGKHWqSo2CDcKqWILqV3I2tBMkhcno4UFZ+lMEop44NIixQCCYJNUnQCkMwshaWQkhuk4BQglVkKT8EiDVJoChBA85ECs5FCTVJwlYRl/69hMkdHKShNdaQ8tgVaKUxDymjaSiEqKch+l2uk5JA67CCFJgcpWynpUUDjHQjS6UmyRopKj1JXqAYpZwCiDlIIzCGoZtFzAMn2UvgspNDFgs4ChM9ICp+LFPEjxSaF8jkELxZ4FiD1Ov4Pwj6gn20XvJsAAAAASUVORK5CYII=');

36

}

37	.cloud.large .switch{

38	background-position: -138px 0;

39

}

 

view sourceprint?

1	<div class="cloud large"><div class="switch"></div></div>

 

搞定！测试页面：http://tid.tenpay.com/labs/example/cloud/

 

原文：http://www.tuquu.com/Tutorial/wd2631.html