CSS3背景颜色变化、平移的动画效果

CSS3动画：变换颜色和平移

开发工具与关键技术：DW-CSS3动画+关键帧
作者：徐晶旗
撰写时间：2019年1月18日

1.首先我在html中建立一个div标签，加上一个class的类，给它的类命名为“home”，再到这个标签里面建立一个相同的div标签，它的类命名为“happy”，里面再建立一个小的div标签，表示一个大的盒子包裹着一个小的盒子，小的盒子里面又嵌套了一个元素。

2.然后再设置它的样式，给大的盒子的宽度设置为100%，表示占满整个父级元素的宽度，高度设置为100个像素，然后给小的div标签设置宽高，背景颜色，再给它设置一个动画函数“animation”这样它就具备了动画效果，把happy绑定到div元素内，动画时长为1s, 如果忽略时长，则不会产生动画效果，再给它增加一个“infinite” 循环播放，使它的动画效果无限循环，否则动画效果默认只执行一次。

3.再用关键帧“@keyframes”来控制和实现它的动画效果，把它命名为happy，然后用百分比来规定动画的时间，0%动画开始，会改变背景颜色，然后到100%时动画颜色再次发生改变。

4.在截图中可以看出：第一张图是刚开始执行的动画效果，改变了它的背景颜色，第二张图是执行结束时改变的背景颜色，执行完了然后再回到刚开始执行的时候，两种背景颜色就这样循环变化着。

5.以下图片上的代码和上面1、2条原理一样，因为我在一个html中创建的，所以给这次的小标签设置的是span标签，如果我这次同样是设置div标签，那么会和下面的样式起冲突，从而得不到你想要的运行效果。不过像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。所以要给它加个定位，我在这里给它设置了一个绝对定位“position：absolute” ,否则就看不到给它设置的样式。


6. translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动， translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(Y)仅垂直方向移动（Y轴移动）
用法：transform:translate(40px,30px);
在这里我使用了第二种情况，用百分比只在X轴上设置它的平移效果，当它为0%时，元素没有发生改变，当它的值为100%时，元素向右平移100个像素。

7.以下两张截图就是代码实现的动画效果，因为设置在同一个html中，所以两种动画效果在同一个浏览器中打开，两张图片的上面两个是颜色变化的动画效果，下面两个是平移的动画效果。

如有解释不当和漏失，欢迎大家批评指正哟！