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

设页面中有<div class=”shape”></div>,若定义.shape的样式规则为:

.shape

{

position: absolute;

left:125px;

top:75px;

width: 150px;

height: 150px;

border-radius:10% 50% 10% 50%;

border:2px solid #f00;

background-color: #ff0;

}

可在页面中显示如图1所示的图形。

图1  动画基本图形

以这个图形作为参与动画的对象,为其定义关键帧anim,并设置animation属性,使之产生动画效果。

例如,定义如下的关键帧anim

@keyframes anim

{

0%,15% { transform: rotate(0); }

100%   { transform: rotate(360deg);  }

}

可在页面中呈现如图2所示的动画,图形旋转起来了。

图2  图形旋转效果

编写的HTML文件内容如下。

<!DOCTYPE html>

<html>

<title>图形的动画效果</title>

<head>

<style>

.container

{

position: relative;

margin: 50px auto;

width: 400px;

height:300px;

background:#d8d8d8;

overflow:hidden;

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.shape

{

position: absolute;

left:125px;

top:75px;

width: 150px;

height: 150px;

border-radius:10% 50% 10% 50%;

border:2px solid #f00;

background-color: #ff0;

animation:anim 5s linear infinite;

}

@keyframes anim

{

0%     { transform: rotate(0); }

100%   { transform: rotate(360deg);  }

}

</style>

</head>

<body>

<div class="container">

<div class="shape"></div>

</div>

</body>

</html>

1.闪烁

闪烁动画效果的设置主要利用opacity属性为参与动画的对象设置一个透明度级别。其基本格式为:opacity: value;

其中,属性值value指定不透明度。从0.0(完全透明)到1.0(完全不透明)。

若修改关键帧anim如下:

@keyframes anim

{

0%,50%,100%   {opacity:1;}

25%,75%       {opacity:0;}

}

则在页面中呈现如图3所示的闪烁动画效果。

图3  闪烁

2.淡入淡出

利用opacity属性还可以实现淡入淡出的动画效果。

若修改关键帧anim如下:

@keyframes anim

{

0%    {  opacity:1;  transform:translateY(0);  }

100%  {  opacity:0;  transform:translateY(-225px);  }

}

则在页面中呈现如图4所示的向上淡出动画效果。

图4  向上淡出

若修改关键帧anim如下:

@keyframes anim

{

0%    {  opacity:0;  transform:translateX(-275px);  }

100%  {  opacity:1;  transform:translateX(0);  }

}

则在页面中呈现如图5所示的从左淡入动画效果。

图5  从左淡入

仿照上面的例子,大家可以试试向下淡出、向左淡出、向右淡出、从上淡入、从下淡入、从右淡入等动画效果的设置。甚至可以设置从四个角向中心的淡入、从中心向四个角淡出的动画效果。

3.飞入

利用变换属性transform:translate();让对象的位置进行变化,可以实现飞入动画效果。

若修改关键帧anim如下:

@keyframes anim

{

0%    { transform:translate(-275px,-225px);  }

100%  { transform:translate(0,0);  }

}

则在页面中呈现如图6所示的从左上角飞入动画效果。

图6  从左上角飞入

4.缩放

缩放主要是利用变换属性transform:scale(n)进行设置。

若修改关键帧anim如下:

@keyframes anim

{

0%,100%   { transform:scale(1);}

50%  { transform:scale(1.8);}

}

则在页面中呈现如图7所示的放大与缩小动画效果。

图7  放大与缩小

5.翻转

利用属性transform: rotateX(n);或transform: rotateY(n);可以实现翻转动画效果。

若修改关键帧anim如下:

@keyframes anim

{

0%   {transform:perspective(400px) rotateY(0);}

100% {transform:perspective(400px) rotateY(360deg);}

}

则在页面中呈现如图8所示的水平(左右)翻转动画效果。

图8  水平翻转

若修改关键帧anim如下:

@keyframes anim

{

0%   {transform:perspective(400px) rotateX(0);}

100% {transform:perspective(400px) rotateX(360deg);}

}

则在页面中呈现如图9所示的垂直(上下)翻转动画效果。

图9  垂直翻转

若修改关键帧anim如下:

@keyframes anim

{

0%  { transform:perspective(400px) rotateY(0);}

40% { transform:perspective(400px) rotateY(170deg) scale(1.5);}

50% { transform:perspective(400px) rotateY(190deg) scale(1.5);}

80% { transform:perspective(400px) rotateY(360deg) scale(1);}

100% {transform:perspective(400px) scale(1);}

}

则在页面中呈现如图10所示的缩放翻转动画效果。

图10  缩放式翻转

6.摇摆

让对象在一个较小范围内进行旋转,可以实现摇摆的动画效果。

若修改关键帧anim如下:

@keyframes anim

{

20%  { transform:rotate(15deg); }

40%  { transform:rotate(-15deg); }

60%  { transform:rotate(8deg);}

80%  { transform:rotate(-8deg); }

100% { transform:rotate(0); }

}

则在页面中呈现如图11所示的摇摆动画效果。

图11  摇摆

若在摇摆过程同时让对象左右适当平移,修改关键帧anim如下:

@keyframes anim

{

0%,100%   { transform:translateX(0);}

15%  { transform:translateX(-100px) rotate(-5deg);}

30%  { transform:translateX(80px) rotate(5deg);}

45%  { transform:translateX(-65px) rotate(-3deg);}

60%  { transform:translateX(40px) rotate(3deg);}

75%  { transform:translateX(-20px) rotate(-1deg);}

}

则在页面中呈现如图12所示的左右摇摆动画效果。

图12  左右摇摆

若在摇摆过程同时让对象进行适当缩放,修改关键帧anim如下:

@keyframes anim

{

0%,100%  {  transform:scale(1)  rotate(0);}

10%,20%  { transform:scale(0.9) rotate(-8deg);}

30%,50%,70%,90% { transform:scale(1.1) rotate(8deg);}

40%,60%,80%  { transform:scale(1.1) rotate(-8deg);}

}

则在页面中呈现如图13所示的晃动动画效果,它也像在振铃。

图13  晃动

7.往复运动

若修改关键帧anim如下:

@keyframes anim

{

0%,100%  {  transform:translateX(0); }

10%,30%,50%,70%,90%  {  transform:translateX(-15px); }

20%,40%,60%,80%  {  transform:translateX(15px); }

}

则在页面中呈现如图14所示的左右往复运动动画效果。

图14  左右往复运动

若修改关键帧anim如下:

@keyframes anim

{

0%,20%,50%,80%,100% { transform:translateY(0);}

40% { transform:translateY(-50px); }

60% { transform:translateY(50px); }

}

则在页面中呈现如图15所示的上下弹跳动画效果。

图15  上下弹跳

若修改关键帧anim如下:

@keyframes anim

{

0%,100% { transform:translate(-20px,-20px); }

25%     { transform:translate(-20px,20px); }

50%     { transform:translate(20px,20px); }

80%     { transform:translate(20px,-20px); }

}

则在页面中呈现如图16所示的四周循环往复动画效果。

图16  四周循环往复运动

8.旋入

若修改关键帧anim如下:

@keyframes anim

{

0%   { transform-origin:left bottom;transform:rotate(-180deg); opacity:0; }

100%  { transform-origin:left bottom;transform:rotate(0); opacity:1;}

}

则在页面中呈现如图17所示的从左下角旋入动画效果。

图17  从左下角旋入

(0)

相关推荐

  • wps动画效果怎么设置一个一个出来

    wps动画效果设置一个一个出来的方法:首先进入PPT:然后打开"动画"菜单栏,并选中文字:接着在动画列表中找到[出现]动画:最后在动画文本选项中设置[按字母]即可. 进入PPT创建 ...

  • 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​   正文 1.基 ...

  • CSS动画基础知识

    CSS动画就是通过CSS (Cascading Style Sheet,层叠样式表)代码搭建的网页动画.它允许设计师和开发人员通过编辑网站的CSS代码来添加页面动画,从而轻松取代传统动画图片或flas ...

  • 原动画基础教程

    本书由曾获奥斯卡奖的迪斯尼著名动画导演理查德·威廉姆斯编著,是一本深入解析动画绘制技巧的专家动画教材.全书深入讲解了以迪斯尼为代表的西方经典动画的创作原则.制作规律及表现技巧,是迪斯尼动画几十年制作经 ...

  • 3dmax动画基础教程

    188:513dmax动画基础教程 2.1万 5-

  • 3DsMax 角色动画基础

    09:11:38 [委:(01动画基础进阶教程)3DsMax 角色动画基础-CG教程]biped骨骼系统全面讲解动画制作 261 3 07:09:12 [委:(02动画基础进阶教程)3DsMax 角色 ...

  • 科研绘图-动画基础课程

    70:17YND科研绘图-动画基础课程 881 2020-

  • 三维游戏动画基础教学:游戏角色动画

    567:15[动画师生存手册]高清无电流音 2752020-12-24 396:12[艺点动画]三维游戏动画基础教学:游戏角色动画 5412020-12-21 134:46[艺点动画]三维游戏动画基础 ...

  • JavaScript动画基础:canvas绘制简单动画

    动画是将静止的画面变为动态的艺术.实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...