CSS3 Animation：background-image

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

用两个keyframes就搞定了。

代码示例：

`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 source print ?

`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的效果，分两步：

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

代码示例：

view source print ?

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 source print ?

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

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

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

CSS3 Animation：background-image

相关推荐