CSS动画基础知识

1、CSS 动画基础知识CSS动画就是通过 CSS （Cascading Style Sheet,层叠样式表）代码搭建的网页动画。 它允许设计师和开发人员通过编辑网站的CSS 代码来添加页面动画，从而轻松取代传统动画图片或flash 动画的设计方式。transition （过渡）和 animation （动画）是 CSS3中的两种动画属性。transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。animation 强调流程与控制，对元素的一个或多个属性的变

2、化进行控制，可以有多个关键帧（ animation 和 keyframes 结合使用）。1 transition 属性transition 属性是一个简写属性，用于设置四个过渡属性：transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 。（ 1） transition-duration 属性。transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。 其格式为：transition-duration: time;属性值 time 规定完

3、成过渡效果需要花费的时间（以秒或毫秒计）。默认值是0，意味着不会有效果。若想得到动画效果，需要指定transition-duration 属性，否则持续时间为0， transition 不会有任何效果。（ 2） transition-delay 属性。transition-delay 属性规定过渡效果何时开始。其格式为：transition-delay: time;属性值 time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。（ 3） transition-property 属性。transition-property 属性指定CSS 属性的 nametransition 效果（ tr

4、ansition 效果时将会启动指定的 CSS 属性的变化）。其格式为：transition-property: none |all | property;其中，属性值none表示没有属性会获得过渡效果；属性值all表示所有属性都将获得过渡效果；property 定义应用过渡效果的CSS 属性名称列表，列表以逗号分隔。（ 4） transition-timing-function 属性。transition-timing-function 属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。其格式为：transition-timing-function: linear|ea

5、se|ease-in|ease-out|ease-in-out|cubic-bezier（n,n,n,n）;各属性值的功能描述如下：linear 规定以相同速度开始至结束的过渡效果（等于cubic-bezier（0,0,1,1） ）。ease 规 定 慢 速 开 始 ， 然 后 变 快 ， 然 后 慢 速 结 束 的 过 渡 效 果 （ 等 于 cubic-bezier（0.25,0.1,0.25,1） ）。ease-in 规定以慢速开始的过渡效果（等于cubic-bezier（0.42,0,1,1） ）。ease-out 规定以慢速结束的过渡效果（等于cubic-bezier（0,0,0.5

6、8,1） ）。ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1)。cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是 0至1之间的数值。例1 transition属性的简单应用。先看一个简单的例子，体会 transition属性的应用。在页面中放置一个类名为container的层作为效果展示容器，在该层中再定义一个类名为move-box的层作为应用过渡效果的对象，HTML代码描述如下：为两个层定义CSS样式如下：.containerwidth: 300px;height: 200

7、px;border: 4px solid rgba(255, 0, 0, 0.9); .move-boxleft:0;width: 50px;height: 50px;position: relative;background: rgb(0,0,255);这样，在页面中会显示如图1所示的图形。图1两个层在页面中的显示为.containe层添加鼠标悬停样式规则，设置move-box层白left属性值为250px,这样当鼠标悬停在图1所示的红色矩形框中，蓝色正方形会移动到红色矩形框的最右端。.container:hover .move-boxleft:250px;但这个移动是瞬时完成的，没有任何过

8、渡效果，更谈不上动画了。为此，需要为这个移动的变化设置transition属性。增加样式规则如下：.container .move-boxtransition-duration: 2s;此时，可以得到如图2所示的蓝色小正方形移动的动画效果。当鼠标悬停在红色矩形框中时，蓝色小正方形从左向右移动；当鼠标移离时，蓝色小正方形从右向左移动。图2蓝色小正方形移动：双向过渡效果完整的HTML代码如下。transition 属性的简单应用 .containerwidth: 300px;height: 200px;border: 4px solid rgba(255, 0, 0, 0.9);.move-box

9、left:0;width: 50px;height: 50px;position: relative;background: rgb(0,0,255);.container .move-boxtransition-duration: 2s;.container:hover .move-boxleft:250px; 在这个例子中，在 .container .move-box中设置了过渡动画完成的时间为2秒钟(transition-duration: 2s;),这样在left属性变化时会产生过渡动画效果，而这种效果的产生有两种途径：一种是鼠标在container上悬停，move-box的样式从默认

10、样式到.container:hover 的样式，left属性发生了变化，触发了过渡效果；一种是鼠标移离 container层，move-box的样式从.container:hover的样式回到默认样式，left也变化了，因此也产生了过渡效果。这 两个方向上的过渡都是平滑不突兀的。若 将.container .move-box 样式定 义 中 的 transition-duration: 2s;移 至1J.container:hover .move-box 中， 并删除 .container .move-box 样式定义， 如下：.container:hover .move-boxleft:25

11、0px;transition-duration: 2s;此时，过渡动画是单一方向上的，当鼠标在container上悬停时，move-box的样式从默认样式到.container:hover的样式，left属性发生了变化，触发了过渡效果；当鼠标移离container层，move-box的样式从.container:hover的样式回到默认样式，left也变化了，但此 时不是过渡动画的方式，而是直接回到默认，看上去比较突兀和生硬。效果如图3所示。图3蓝色小正方形移动：单一方向上有过渡效果例1中的过渡动画效果是通过改变动画元素的left属性，从而使得元素的位置发生改变而得到的。为了对选定元素进行更多

12、的变换，可以应用transform属性。transform属性应用于元素的2D或3D转换。这个属性允许将元素旋转、缩放、移动、倾斜等。其基本使用格式为：transform: none|transform-functions;其中，属性值none表示不进行转换；属性值transform-functions表示所采用的转换函数， 可应用的转换函数和功能描述如下：matrix(n,n,n,n,n,n) 定义2D转换，使用六个值的矩阵。matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。translate(x,y)定义

13、2D平移转换。translate3d(x,y,z)定义3D 平移转换。translateX(x)定义X 轴平移转换translateY(y)定义Y 轴平移转换translateZ(z)定义Z 轴 3D 平移转换scale(x,y)定义2D 缩放转换。scale3d(x,y,z)定义3D 缩放转换。scaleX(x)通过设置X 轴的值来定义缩放转换。scaleY(y)通过设置Y 轴的值来定义缩放转换。scaleZ(z)通过设置Z 轴的值来定义3D 缩放转换。rotate(angle)定义2D 旋转，在参数中规定角度。rotate3d(x,y,z,angle)定义3D 旋转。rotateX(ang

14、le)定义沿着X 轴的3D 旋转。rotateY(angle)定义沿着Y 轴的3D 旋转。rotateZ(angle)定义沿着Z 轴的3D 旋转。skew(x-angle,y-angle)定义沿着X 和 Y 轴的2D 倾斜转换。skewX(angle)定义沿着X 轴的2D 倾斜转换。skewY(angle)定义沿着Y 轴的2D 倾斜转换。perspective(n)为 3D 转换元素定义透视视图。例如， transform: translate(50px,100px); 表示元素从左边移动50 个像素，并从顶部移动100 像素。将例 1 中 .container:hover .move-box

15、 的定义修改为：.container:hover .move-boxtransform: translate(250px,0);或.container:hover .move-boxtransform: translateX(250px);同样可以实现如图2 所示的页面效果。但transform 属性的设置更灵活。例如，将例1 中 .container:hover .move-box 的定义修改为：.container:hover .move-boxtransform: translate(250px,150px);则可得到如图4 所示的动画效果。此时， 蓝色小正方形在水平和垂直方向上都发生了

16、平 移。图4蓝色小正方形沿对角线平移再如，将例 1中.container:hover .move-box的定义修改为： .container:hover .move-boxtransform: rotate(45deg) translateX(200px);则可得到如图5所示的动画效果。图5蓝色小正方形旋转并平移例2图片的平移、缩放和旋转变换。在页面中放置一个类名为container的层作为效果展示容器，在该层中再定义一个9个子层，每个子层中放置一幅图片，为图片添加鼠标悬停变换效果，当鼠标悬停在某幅图片上时，该图片或平移、或缩放、或旋转。编写完整的HTML代码如下。图片的平移、缩放和旋转变换*

17、margin: 0;padding: 0; .containerborder: 3px solid rgba(255, 0, 255, 0.9);width: 1000px;height: 600px;display: flex;margin-left: 200px;flex-direction: row;flex-wrap: wrap;justify-content: space-around;align-content: space-around;.containerdivwidth: 300px;height: 150px;transition-duration: 2s;.contain

18、erdivimgwidth: 100%;height: 100%;.containerdiv:nth-child(1):hovertransform: translate(665px,200px);.containerdiv:nth-child(2):hovertransform: rotateX(60deg);.containerdiv:nth-child(3):hovertransform: rotateY(60deg);.containerdiv:nth-child(4):hovertransform: rotateX(360deg);.containerdiv:nth-child(5)

19、:hovertransform: scale(2);.containerdiv:nth-child(6):hovertransform: rotateY(360deg);.containerdiv:nth-child(7):hovertransform: rotateZ(360deg);).containerdiv:nth-child(8):hover (transform: rotateZ(180deg);).containerdiv:nth-child(9):hover(transform: skew(30deg); )在浏览器中打开保存上述HTML代码的html文件，在浏览器中呈现出如图

20、6所示的变换效果(部分示例)。图6图片旋转transition的优点在于简单易用，但是它有几个很大的局限。（ 1） transition 需要事件触发，所以没法在网页加载时自动发生。例1 和例 2 都是采用伪选择器hover,在鼠标悬停时产生动画效果。（ 2） transition 是一次性的，不能重复发生，除非一再触发。（ 3） transition 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 例如， 例 1 中的蓝色小正方形只能沿一条指定的路线移动。若想让蓝色小正方形沿着上下左右边界转圈移动，transition 属性就没法做到。CSS Animation 就是为

21、了解决这些问题而提出的。2 animation 属性animation 属 性 是 六 个 动 画 属 性 的 简 写 属 性 ， 这 6 个 属 性 是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 和 animation-direction 。（ 1） animation-name 属性。animation-name 属性为 keyframes 动画规定名称。其格式为：animation-name: keyframen

22、ame|none;其中，属性值keyframename 规定需要绑定到选择器的keyframe 的名称。属性值none规定无动画效果（可用于覆盖来自级联的动画）。（ 2） animation-duration 属性。animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。其格式为： animation-duration: time;（ 3） animation-timing-function 属性。animation-timing-function 属性规定动画的速度曲线。速度曲线用于，使变化更为平滑。其格式为：animation-timing-functio

23、n: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier（n,n,n,n）;各属性值的功能描述如下：linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier（n,n,n,n） 在 cubic-bezier 函数中定义自己的值。可能的值是从0 到 1 的数值。（ 4） animation-delay 属性。animation-delay 属性定义动画什么时候开始。其格式为：a

24、nimation-delay: time;属性值time单位可以是秒（s）或毫秒（ms）。并且time允许负值，-2s使动画马上开始，但跳过2 秒进入动画。（ 5） animation-iteration-count 属性。animation-iteration-count 属性定义动画的播放次数。其格式为：animation-iteration-count: n|infinite;其中，属性值n 定义动画播放次数的数值；属性值infinite 规定动画应该无限次播放。（ 6） animation-direction 属性。animation-direction 属性规定是否应该轮流反向播放动

25、画。其格式为：animation-direction: normal|reverse|alternate|alternate-reverse;其中，属性值normal 表示以正常的方式播放动画；reverse 以 相 反 方 向 播 放 动 画 ；alternate播放动画时，每奇数时间（1,3,5）正常播放，每偶数时间（2,4,6）反方向播放； alternate-reverse播放动画时，每奇数时间（1,3,5）反方向播放，每偶数时间（2,4,6）正 常播放。例 3 沿着容器边框转圈移动的蓝色小正方形。修改例 1 中的效果，使得蓝色小正方形可以沿着上边框、右边框、下边框和左边框循环转圈。编

26、写HTML 文件如下。 沿边框四周移动的小正方形.containerwidth: 300px;height: 200px;border: 4px solid rgba（255, 0, 0, 0.9）;.move-boxleft:0;top:0;width: 50px;height: 50px;position: relative;background: rgb（0,0,255）;animation:myfirst 5s infinite;keyframes myfirst0% left:0px; top:0px;25% left:250px; top:0px;50% left:250px; t

27、op:150px;75% left:0px; top:150px; 100% left:0px; top:0px;在浏览器中打开保存上述 HTML代码的html文件，在浏览器中呈现出如图 7所示的动 画效果。图7沿四周循环转圈的小正方形如在上面 CSS定义的animation:myfirst 5s infinite;”语句后，再加上一条语句 “animation-direction:alternate;，则得到如图8所示的动画效果，与图7的不同之处在于, 偶数运动周期时，小正方形的移动方向沿着“左边框下边框 右边框上边框”。图8沿四周循环转圈的小正方形需要说明的是：Internet Explo

28、rer 10、Firefox 以及 Opera 等支持 animation 属性，Safari 和 Chrome支持替代的 -webkit-animation 属性，而Internet Explorer 9 以及更早的版本不支 持animation属性。因此，从浏览器兼容性的角度出发，在例 3的HTML文件的CSS定义 中可加上如下定义：-webkit-keyframes myfirst 0% left:0px; top:0px;25% left:250px; top:0px;50% left:250px; top:150px;75% left:0px; top:150px; 100% lef

29、t:0px; top:0px;例4图片的缩放、旋转和倾斜动画。在页面中放置一个类名为container的层作为效果展示容器，在该层中再定义一个4个子层，每个子层中放置一幅图片，为每幅图片添加动画效果，第 1幅图片缩小后放大，第 2幅图片绕X 轴翻转，第3 幅图片沿Z 轴旋转，第4 幅图片倾斜。编写完整的HTML 代码如下。 图片的缩放、旋转和倾斜变换*margin: 0;padding: 0;.containerborder: 3px solid rgba(255, 0, 255, 0.9);width: 850px;height: 550px;display: flex;margin: 0

30、auto;flex-direction: row;flex-wrap: wrap;justify-content: space-around;align-content: space-around;.containerdivwidth: 400px;height:250px;.containerdivimgwidth: 100%;height: 100%;.containerdiv:nth-child(1)animation:myAnim1 3s infinite;keyframes myAnim10%transform:none;50%transform:scale(0);100% tran

31、sform:scale(1);.containerdiv:nth-child(2)animation:myAnim2 3s infinite;keyframes myAnim20% transform: none;100% transform: rotateX(360deg);.containerdiv:nth-child(3)animation:myAnim3 3s infinite;keyframes myAnim3from transform: none;to transform: rotateZ(360deg);.containerdiv:nth-child(4)animation:m

32、yAnim4 3s infinite;keyframes myAnim40% transform: none;33% transform: skew(15deg,15deg);67% transform: skew(-15deg,-15deg);100% transform: skew(0deg,0deg);在浏览器中打开保存上述HTML 代码的 html 文件， 在浏览器中呈现出如图画效果。9 所示的动图9图片的缩放、旋转和倾斜动画例5旋转的文字。在页面中放置一个类名为container的层作为效果展示容器，在该层中再定义一个3个子层，每个子层中放置一个汉字，为每个汉字所在的层添加动画效果，

33、第1个汉字水平翻转，第2个汉字绕中心旋转，第 3个汉字垂直翻转。编写完整的HTML代码如下。 欢乐颂 .containermargin: 0 auto;width: 650px;height: 250px;display: flex;flex-direction: row;flex-wrap: wrap;border: 4px solid rgba(255, 0, 0, 0.9);.containerdivwidth:200px;height:200px;margin:20px auto;text-align: center;font:800 100px/200px 隶书 ;border-ra

34、dius: 50%;transform-origin:center 50%;.containerdiv:nth-child(1)background:#f00;animation: anim1 2s infinite linear;keyframes anim1from transform: rotate(0);to transform: rotateX(360deg);.containerdiv:nth-child(2)background:#0f0;animation: anim2 2s infinite linear;keyframes anim2from transform: rotate(0);to transform: rotate(360deg);.containerdiv:nth-c