CSS动画基础：常用动画效果的设置

1、CSS动画基础：常用动画效果的设置设页面中W,若定义.shape的样式规则为： .shape(position: absolute;left:125px;top:75px;width: 150px;height: 150px;border-radius: 10% 50% 10% 50%;border:2px solid #f00;background-color: #ffD;可在页面中显示如图1所示的图形。图1动画基本图形以这个图形作为参与动画的对象，为其定义关键帧amm，并设置animation属性，使之 产生动画效果。例如，定义如下的关键帧anunkeyframes anun(0%,15%

2、 tiansfbrm: rotate(O); 100%transform: rotate(360deg); 可在页面中呈现如图2所示的动画，图形旋转起来了。图2图形旋转效果编写的HTML文件内容如下。title图形的动画效果 J.container(position: relative;margin: 50px auto;width: 400px;height: 300px;background: #d 8 d 8 d 8;overflowzhidden;border: 4px solid rgba(255, 0, 0, 0.9);border-radius: 10%;.shape(posit

3、ion: absolute;left:125px;top:75px;width: 150px;height: 150px;border-radius: 10% 50% 10% 50%;border:2px solid #f00;background-color: #ffO;animationsnim 5s linear mfinite;keyftames anun(0%transform: rotate(O);100%transform: rotate(360deg); JJ1 .闪烁闪烁动画效果的设置主要利用叩achy属性为参与动画的对象设置一个透明度级别。其 基本格式为：opacity:

4、value;其中，属性值value指定不透明度。从0.0 (完全透明)到L0 (完全不透明)。 若修改关键帧amm如下：keyfiames anun(0%,50%, 100%opacity:1;25%,75% opacity:。; 则在页面中呈现如图3所示的闪烁动画效果。图3闪烁2 .淡入淡出利用opacity属性还可以实现淡入淡出的动画效果。若修改关键帧amm如下：keyfiames anun(0% opacity:!; transform: translate Y (0); 100% opacity:。； transform: translate Y (-225px); 则在页面中呈现如图

5、4所示的向上淡出动画效果。图4向上淡出若修改关键帧amm如卜.：keyfiames anun(0% opacity:0; transform: translateX(-275px); 100% opacity: 1; transform: translateX(O); 则在页面中呈现如图5所示的从左淡入动画效果。图5从左淡入仿照上面的例子，大家可以试试向下淡出、向左淡出、向右淡出、从上淡入、从下淡入、 从右淡入等动画效果的设置。甚至可以设置从四个角向中心的淡入、从中心向四个角淡出的 动画效果。3 .飞入利用变换属性transfonntranslateO;让对象的位置进行变化，可以实现飞入动画效

6、果。若修改关键帧amm如下：keyframes anim(0%transfbrm:translate(-275px,-225px); 100% transform:translate(0,0); 则在页面中呈现如图6所示的从左上角飞入动画效果。图6从左上角飞入4 .缩放缩放主要是利用变换属性tiansfonn:scale(n)进行设置。 若修改关键帧amm如下：keyfiames anun(0%, 100%transform: scale( 1);)50% tiaiisfonn:scale( 1.8);则在页面中呈现如图7所示的放大与缩小动画效果。图7放大与缩小5 .翻转利用属性 transf

7、orm: rotateX(n);Wc transform: rotateY(n);可以实现翻转动画效果。若修改关键帧amm如下：keyfiames anun(0%transform:perspective(400px) iotateY(0);100% transform:peispective(400px) rotateY(360deg);则在页面中呈现如图8所示的水平(左右)翻转动画效果。图8水平翻转若修改关键帧amm如下：keyfiames anun(0%transform:perspective(400px) rotateX(O);100% transform:perspective(4

8、00px) iotateX(360deg);则在页面中呈现如图9所示的垂直(上下)翻转动画效果。图9垂直翻转若修改关键帧amm如卜.：keyfiames anun(0% tiaiisform:perspective(400px) rotateY(O);40% transfbnn:perspective(400px) rotateY(l 70deg) scale(1.5);50% tiansform:perspective(400px) iotateY(l 90deg) scale(1.5);80% transfbnn:perspective(400px) rotateY(360deg) sca

9、le(l); 100% transfbrm:perspective(400px) scale(l);则在页面中呈现如图10所示的缩放翻转动画效果。图10缩放式翻转6 .摇摆让对象在一个较小范闱内进行旋转，可以实现摇摆的动画效果。若修改关键帧amm如下：keyfiames anun(20% tiaiisfbnn:rotate(l 5deg); 40% tiaiisfbnn:rotate(-15deg); 60% tiaiisfbrm:rotate(8deg);80% tiaiisfonn:rotate(-8deg); 100% transform:rotate(0); 则在页面中呈现如图11所示

10、的摇摆动画效果。图11摇摆若在摇摆过程同时让对象左右适当平移，修改关键帧anmi如下: keyfiames anun0%, 100%transform: translateX(O);15% tiaiisfbnn:tianslateX(-1 OOpx) rotate(-5deg);30% tiaiisfbrm:tianslateX(80px) rotate(5deg); 45% transform:tianslateX(-65px) rotate(-3deg);60% tiaiisfbrm:tianslateX(40px) rotate(3deg);75% tiaiisfbnn:tianslat

11、eX(-20px) rotate(-1 deg);则在页面中呈现如图12所示的左右摇摆动画效果。图12左右摇摆若在摇摆过程同时让对象进行适当缩放，修改关健帧anmi如下:keyfiames anun(0%, 100% transform: scale(l) rotate(O);10%,20% tiansform:scale(0.9) iotate(-8deg);30%,50%,70%,90% tiansfbrm:scale(l.l)rotate(8deg);40%,60%,80% transform:scale( 1.1) rotate(-8deg);7 .往复运动若修改关键帧amm如下：ke

12、yfiames anun(0%,100% transform: tiaiislateX(O); )10%,30%,50%,70%,90% transform:tiaiislateX(-15px); 20%,40%,60%,80% transform:translateX( 15px); 则在页面中呈现如图14所示的左右往更运动动画效果。图14左右往亚运动若修改关键帧amm如下：keyfiames anun(0%,20%,50%,80%,100% tiansform:translateY(0);40% tiansform:translateY(-50px); 60% tiansfbrm: translateY(5Opx); )则在页面中呈现如图15所示的上下弹跳动画效果。图15上下弹跳若修改关键帧amm如下：keyfiames anun(0%,100% transfoim:translate(-20px,-20px);25% transfbrm:translate(-20px,20px); 50%transfbrm:translate(20px,20px); 80%transform:translate(20px,-20px); 则在页面中呈现如图16所示的四周循环往好动画效果。图16四周循环往亚运