• 首页
• 宠物洗澡
• 列表
• 正文

一起领略css3动画的强大

2017-11-10 00:00:00

148 257

丰富的线上&线下活动，深入探索云世界

做任务，得社区积分和周边

最真实的开发者用云体验

让每位学生受益于普惠算力

让创作激发创新

资深技术专家手把手带教

遇见技术追梦人

技术交流，直击现场

海量开发者使用工具、手册，免费下载

极速、全面、稳定、安全的开源镜像

开发手册、白皮书、案例集等实战精华

为开发者定制的Chrome浏览器插件

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:

3.在默认样式中通过添加过渡函数添加一些不同的样式

语法:

transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]transition主要包含四个属性值:

transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果

transition-property：none|all|[][',']transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变),all(所有属性改变)这个也是其默认值,indent(元素属性名);当其值为none时transition马上停止执行,当指定为all时则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值;其对应的属性如下:

|background-color|background-position|border-bottom/left/top/right-color|border-bottom/left/top/right-width|border-spacing|bottom/left/top/right|clip|color|font-size|font-weight|height|letter-spacing|line-height|margin-bottom/left/top/right|max/min-height/width|opacity|outline-color|outline-width|padding-bottom/left/top/right|text-indent|text-shadow|vertical-align|visibility|width|word-spacing|z-index|

用一个简单的例子来说明all:

假设初始状态设置了样式width/height/background,当你在终始状态都改变了这三个属性,那么all代表的就是width/height/background,如果你的终始状态只改变了width/height,那么all代表的就是width/height

transition-timing-function属性指的是过渡的"缓动函数",主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

steps([,start|end]):用来指定间隔个数(该值只能是正整数)

第二个参数:该参数可选,默认是end,表示开始值保持一次;若参数为start,表示开始不保持

举例:

transition-delay语法:

a{-moz-transition:all0.5sease-in;-webkit-transition:all0.5sease-in;-o-transition:all0.5sease-in;transition:all0.5sease-in;}综合上述我们可以给transition一个速记法:transition:,相对应的一个示例代码

p{-webkit-transition:all.5sease-in-out1s;//Webkit内核-o-transition:all.5sease-in-out1s;//Opera-moz-transition:all.5sease-in-out1s;//Mozilla内核transition:all.5sease-in-out1s;//W3C标准}浏览器的兼容性为了避免兼容性,在应用transition时我们有必要加上各自的前缀,最好再放上我们W3C的标准写法,这样只要浏览器支持我们的transition属性,那么这种效果就会自动加上去

Transform字面上就是变形/改变的意思,在CSS3中transform属性实现了一些可用SVG实现的功能,它可用于内联(inline)元素和块级(block)元素;transform主要包括以下几种:旋转rotate/扭曲skew/缩放scale/移动translate/矩阵变形matrix;下面我们一起来看看CSS3中transform的各个动画具体如何实现

transform：none|[]也就是：transform:rotate|scale|skew|translate|matrix;none表示不进行变换;表示一个或多个变换函数,以空格分开,即我们同时对一个元素进行transform的多种属性操作,例如rotate/scale/translate三种,但以往我们叠加效果都是用逗号(,)隔开,但transform中使用多个属性时却需要有空格隔开

rotate():通过指定的角度参数对原元素指定一个2Drotation(2D旋转),需先有transform-origin属性的定义;transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数则表示逆时针旋转;如:transform:rotate(30deg)

移动translate移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)

通过矢量[tx,ty]指定一个2Dtranslation,tx是第一个过渡值参数,ty是第二个过渡值参数选项;如果未被提供,则ty以0作为其值,也就是translate(x,y):表示对象按照设定的x,y参数值进行平移,当值为负数时反方向移动物体,其基点默认为元素中心点,也可以根据transform-origin进行改变基点;如transform:translate(100px,20px)

translateX()通过给定一个X方向上的数值指定一个translation,只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置;如:transform:translateX(100px)

通过给定Y方向的数目指定一个translation,只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置;如:transform:translateY(20px)

缩放scale和移动translate极其相似,他也具有三种情况:scale(x,y):使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放),scaleX(x):元素仅水平方向缩放(X轴缩放),scaleY(y):元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1元素缩小

提供执行[sx,sy]缩放矢量的两个参数指定一个2Dscale(2D缩放);如果第二个参数未提供则取与第一个参数一样的值,scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;其中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值则表示X/Y两个方向的缩放倍数是一样的,并以X为准;如:transform:scale(2,1.5)

scaleX()使用[sx,1]缩放矢量执行缩放操作,sx为所需参数;scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点;如:transform:scaleX(2)

使用[1,sy]缩放矢量执行缩放操作,sy为所需参数;scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点;如:transform:scaleY(2)

扭曲skew和translate/scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形),skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形),skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)

X轴Y轴上的skewtransformation(斜切变换);第一个参数对应X轴,第二个参数对应Y轴;如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切;skew是用来对元素进行扭曲变形,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度;其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg;同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置;如:transform:skew(30deg,10deg)

matrix(,,,,,):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[abcdef]变换矩阵;就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素;此属性值使用涉及到数学中的矩阵,在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法

前面我们多次提到transform-origin这个东东,他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置;换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate/translate/scale/skew/matrix等操作都是以元素自己中心位置进行变化的,但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin使元素基点不在是中心位置,以达到你需要的基点位置;下面我们主要来看看其使用规则

transform-origin(X,Y):用来设置元素的运动的基点(参照点),默认点是元素的中心点,其中X和Y的值可以是百分值/em/px,其中X也可以是字符参数值left/center/right,Y和X一样除了百分值外还可以设置字符值top/center/bottom,这个看上去有点像我们background-position设置一样,下面我列出他们相对应的写法:

其中left/center/right是水平方向取值,对应的百分值为left=0%/center=50%/right=100%,而top/center/bottom是垂直方向的取值,其中top=0%/center=50%/bottom=100%;如果只取一个值,表示垂直方向值不变

更多改变中心基点的办法,大家可以在本地多体会,这里还要提醒的是:transform-origin并不是transform中的属性值,他具有自己的语法,而且transform-origin跟其他的css3属性一样需要在不同的浏览内核中加上相应的前缀,下面列出各种浏览器内核下的语法规则:

-moz-transform-origin:xy;//Mozilla内核浏览器：firefox3.5+-webkit-transform-origin:xy;//Webkit内核浏览器：SafariandChrome-o-transform-origin:xy;//Opera-ms-transform-origin:xy;//IE9transform-origin:xy;//W3C标准transform在不同浏览器内核下的书写规则

-moz-transform:rotate|scale|skew|translate;//Mozilla内核浏览器：firefox3.5+-webkit-transform:rotate|scale|skew|translate;//Webkit内核浏览器：SafariandChrome-o-transform:rotate|scale|skew|translate;//Opera-ms-transform:rotate|scale|skew|translate;//IE9transform:rotate|scale|skew|translate;//W3C标准同样的transform在IE9下版本是无法兼容的

举个同时使用多个属性的例子

#current{width:200px;height:100px;color:white;background-color:#3EDFF4;text-align:center;transition:1s;}#current:hover{transform:scale(0.5,1)rotate(30deg);}Animation我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,现在我们趁着这个热劲继续第三个动画属性Animation的学习;单从Animation字面上的意思,我们就知道是"动画",但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Flash/JavaScript/jQuery制作出来的动画效果又不一样,因为我们使用CSS3的Animation制作动画可以省去复杂的js/jquery代码

Keyframes语法

@keyframesIDENT{from{Properties:Propertiesvalue;}Percentage{Properties:Propertiesvalue;}to{Properties:Propertiesvalue;}}或者全部写成百分比的形式：@keyframesIDENT{0%{Properties:Propertiesvalue;}Percentage{Properties:Propertiesvalue;}100%{Properties:Propertiesvalue;}}其中IDENT是一个动画名称,可以随便取,当然语义化一点更好;Percentage是百分比值,我们可以添加许多个这样的百分比,Properties为css的属性名,比如说left/background等,value就是相对应的属性的属性值

@keyframes'wobble'{0%{margin-left:100px;background:green;}40%{margin-left:150px;background:orange;}60%{margin-left:75px;background:blue;}100%{margin-left:100px;background:red;}}@-webkit-keyframes'wobble'{0%{margin-left:100px;background:green;}40%{margin-left:150px;background:orange;}60%{margin-left:75px;background:blue;}100%{margin-left:100px;background:red;}}这里我们定义了一个叫"wobble"的动画,从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:wobble动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处背景色变成red

Keyframes定义好后,我们需要怎么去调用刚才定义好的动画"wobble"

animation-name:none/IDENTIDENT是由@keyframes创建的动画名,我们可以同时附几个animation给一个元素,只需要用逗号隔开;none为默认值,当值为none时将没有任何动画效果,这可以用于覆盖任何动画

注意：需要在Chrome和Safari上面的基础上加上-webkit-前缀,Firefox加上-moz-

animation-duration:取值为数值,单位为秒,其默认值为0,这意味着动画周期为0,也就是没有动画效果(如果值为负值会被视为0)

animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(,,,)它和transition中的transition-timing-function一样,具有以下几种变换方式:ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier