CSS3Animation 对CSS3的强大一如既往的自信,自己在倒腾一个用例,就是一朵白云的两个表情切换,想想很容易实现吧,在PC上也是如此, 用两个keyframes就搞定了。 代码示例:

.cloud.large{
    width: 138px;
    height: 46px;
    background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');
    -webkit-animation: large 3s ease infinite;
            animation: large 3s ease infinite;
}
@-webkit-keyframes large{
    50% {
        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=');
    }
    100% {
        background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');
    }
}
@keyframes large{
    50% {
        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=');
    }
    100% {
        background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');
    }
}
<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值

  代码示例:

.cloud{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.cloud .switch{
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-animation: switch 2s ease infinite;
            animation: switch 2s ease infinite;
}
@-webkit-keyframes switch{
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes switch{
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.cloud.large, .cloud.large .switch{
    width: 138px;
    height: 46px;
    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=');
}
.cloud.large .switch{
    background-position: -138px 0;
}

 

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

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