搜索
您的当前位置:首页正文

css笔记--区分css3中的transformtransitionanimation_html/css

2023-11-28 来源:莱芜美食

出处:http://blog.csdn.net/dyllove98/article/details/8957232

CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明:

transform

从字面来看transform的释义为改变,使…变形;转换 。这里我们就可以理解为变形。那都能怎么变呢?

none 表示不进行变换;

rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值(50px 70px)。

skew 扭曲 transform:skew(30deg,30deg) skew(相对x轴倾斜,相对y轴倾斜)

scale 缩放 transform:scale(2,3) 横向放大2倍,纵向放大3倍。如等比放大写一个参数即可。

translate 移动 transform:translate(50px, 50px);

matrix 矩阵变形 基本语法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一个二维矩阵:

 ┌ ┐ │ a b │ │ c d │ └ ┘
a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜
 tx, ty就是就是基于X和Y 坐标重新定位元素。其实就是translate (tx,ty)Transition W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition主要包含四个属性值:transition-property: 执行变换的属性;
transition- duration: 变换延续的时间:
transition-timing-function: 在延续时间段,变换的速率变化;
transition- delay :变换延迟时间
下面一一说明这四个属性:
transition-property

语法:

transition-property : none | all | [ ]

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

1、color: 通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-color,border-color,color,outline-color等CSS属性;

2、length:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等属性;

3、percentage:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等属性;

4、integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset,z-index等属性;

5、number真实的(浮点型)数值,如:zoom,opacity,font-weight等属性;

6、transform list:详情请参阅:《CSS3 Transform》。

7、rectangle:通过x、 y、 width和height(转为数值)变换,如:crop;

8、visibility:离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility;

9、shadow:作用于color、x、y、和blur(模糊)属性,如:text-shadow;

10、gradient:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image;

11、paint server (SVG):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似;

12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化;

13、a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。

支持执行transition效果的属性:

Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
 

transition-duration

transition-duration是用来指定元素 转换过程的持续时间,取值:

transition-timing-function

取值:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。

transition-delay

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,取 值:

有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果,那么我们只要把几个transition的 声明串 在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:transition-delay与 transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的怭值为 transition-duration第二个为transition-delay。如:

a {transition: background 0.5s ease-in,color 0.3s ease-out}

如果你想给元素执行所有transition效果的属性,那么我们还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式,如:

a{transition: all 0.5s ease-in}

}

animation

顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。

一个官网的示例:

@-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% 40% 60% 100% 来过渡。

keyframes定义好了以后,就可以去调用定义好的动画“wobble”了。

下面我们来看看怎么给一个元素调用animation属性

.demo1 { width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/ }  

 
animation-name:
animation-name:是用来定义一个动画的名称,为Keyframes中的名称,否则不会有动画效果。none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一 个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来 改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的 animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间 段变化的效果。

小编还为您整理了以下内容,可能对您也有帮助:

CSS3中动画属性transform,transition和animation属性的区别

1、translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的;

2、rotate(deg)是用来控制元素旋转角度的;

3、skew[x,y](deg) 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d透视图的时候必须的属性;

4、scale3d(x,y,z) 用来放大缩小效果,属性是比值;

5、matrix3d,css矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊),目前没有理由推荐使用。

CSS animation 与 CSS transition 有何区别

一、指代不同

1、animation :属性是一个简写属性,用于设置六个动画属性。

2、transition:属性是一个简写属性,用于设置四个过渡属性。

二、特点不同

1、animation :animation: name ration timing-function delay iteration-count direction;规定需要绑定到选择器的 keyframe 名称。规定完成动画所花费的时间,以秒或毫秒计。

2、transition:transition: property ration timing-function delay;规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。

三、要求不同

1、animation :请始终规定 animation-ration 属性,否则时长为 0,就不会播放动画了。

2、transition:始终设置 transition-ration 属性,否则时长为 0,就不会产生过渡效果。

参考资料来源:百度百科- CSS3

参考资料来源:百度百科-CSS语法

css3 transition和transform的应用

一、首先学习的是transition属性(zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换)

transition 过渡 作为一个复合属性

1.transition-property 指定可以过渡的属性

默认值是all 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

2.transition-ration 指过渡完成的时间

默认值为0s

3.transition-timing-function 过渡的动画类型

默认值为ease

ease 规定慢速开始,然后变快,之后慢速结束的过渡效果

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

linear 规定以相同速度开始至结束的过渡效果

cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值

4.transition-delay 延迟执行过渡的时间

默认值为0s

二、transform属性

transform 向元素应用2D或3D转换 只对block级元素生效

1.translate 位移

translateX() 在x轴上发生位移或者变形

translateY() 在y轴上发生位移或者变形

translate(x,y) 在x轴 ,y轴上发生位移或者变形 当只有一个值的时候,只有x轴生效

2.scale 缩放

scaleX() 设置在x轴上发生缩放

scaleY() 设置在y轴上发生缩放

scale(x,y) 设置在x轴,y轴上发生缩放 当只有一个值的时候,x,y轴都发生缩放可以设置负数 使用场景:设置小于12px的字体

3.rotate 旋转 2d旋转 设置元素在2d平面旋转(z轴),正数按顺时针,负数按逆时针

rotateX()设置沿x轴旋转

rotateY () 设置沿y轴旋转

4.skew 倾斜

skewX 绕x轴发生倾斜

skewY 绕y轴发生倾斜

skew(x,y) 绕x,y轴发生的倾斜 x轴和y轴和我们理解的相反,常用于平行四边形图案

三、transform-origin: 设置旋转元素的基点位置

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 。

语法:-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?

transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数 ;

top left | left top 等价于 0 0;

top | top center | center top 等价于 50% 0

right top | top right 等价于 100% 0

left | left center | center left 等价于 0 50%

center | center center 等价于 50% 50%(默认值)

right | right center | center right 等价于 100% 50%

bottom left | left bottom 等价于 0 100%

bottom | bottom center | center bottom 等价于 50% 100%

bottom right | right bottom 等价于 100% 100%

CSS3 动画

在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题。CSS3 的出现,让动画变得更加容易,性能也更加好。

CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ;

transform 可以用来设置元素的形状改变,主要有以下几种变形: rotate (旋转)、 scale (缩放)、 skew (扭曲)、 translate (移动)和 matrix (矩阵变形),语法如下:

none 表示不做变换; <transform-function> 表示一个或多个变化函数,变化函数由函数名和参数组成,参数包含在 () 里面,用 空格 分开,例如:

所有的变形都是基于基点,基点默认为元素的中心点。用法: transform-origin: (x, y) ,其中 x 和 y 的值可以是百分比、rem 或者是 px 等等,也可以用表示位置的单词来表示例如:x 可以用 left 、 center 、 right ;y 可以用 top 、 center 、 bottom 。

用法: rotate(<angle>) ;表示通过指定的角度对元素进行旋转变形,如果是正数则顺时针旋转,如果是负数则逆时针旋转,例如:

它有三种用法: scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ;分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放,入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大,反之则缩小,如果等于1代表原始大小。

移动也分三种情况: translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ;分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动,移动单位是 CSS 中的长度单位: px 、 rem 等;

扭曲同样也有三种情况, skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ;同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲,单位为角度。

矩阵变形相对来说非常复杂,涉及到数学中的矩阵计算,有兴趣的同学可以研究一下: CSS3 Transform Matrix

transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态,它有四个属性:

它是用来设置哪些属性的改变会有这种平滑过渡的效果,主要有以下值:

它是用来设置转换过程的持续时间,单位是 s 或者 ms ,默认值为0;

它是来设置过渡效果的速率,它有6种形式的速率:

它是来设置过渡动画开始执行的时间,单位是 s 或者 ms ,默认值为0;

它是 transition-property 、 transition-ration 、 transition-timing-function 、 transition-delay 的简写:

animation 比较类似于 flash 中的 逐帧动画 ,逐帧动画就像电影的播放一样,表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态,整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道,这种逐帧动画是由 关键帧 组成,很多个关键帧连续的播放就组成了动画,在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

它是用来设置动画的名称,可以同时赋值多个动画名称,用 , 隔开:

它是用来设置动画的持续时间,单位为 s ,默认值为 0 :

和 transition-timing-function 类似:

它是来设置动画的开始时间,单位是 s 或者 ms ,默认值为0:

它是来设置动画循环的次数,默认为 1 , infinite 为无限次数的循环:

它是来设置动画播放的方向,默认值为 normal 表示向前播放, alternate 代表动画播放在第偶数次向前播放,第奇数次向反方向播放:

它主要是来控制动画的播放状态: running 代表播放,而 paused 代表停止播放, running 为默认值:

它是 animation-name 、 animation-ration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写:

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了,让我们回顾一下。 transform 我们可以理解为元素的几何变形,它是有规律可寻的,这种变形并不会产生动画效果仅仅是原有形状的改变; transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ; transition 是从一个状态变化到另外一种状态,当变化有了平滑的效果后就产生了动画,它是一个公式化的变化,在比较规则的动画效果中我们可以使用,例如:旋转的风车、行驶的汽车、颜色的渐变等等; animation 的动画效果更加灵活,可以实现像影片一样的复杂无规则的动画。

莱芜美食还为您提供以下相关内容希望对您有帮助:

CSS3 动画

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了,让我们回顾一下。 transform 我们可以理解为元素的几何变形,它是有规律可寻的,这种变形并不会产生动画效果仅仅是原有形状的改变; trans...

CSS3中动画属性transform,transition和animation属性的区别

1、translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的;2、rotate(deg)是用来控制元素旋转角度的;3、skew[x,y](deg) 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d...

css3 transition和transform的应用

一、首先学习的是transition属性(zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换)transition 过渡 作为一个复合属性 1.transition-property 指定可以过渡的属性 默认值是all 定义应用过渡效果的 CSS 属性名称...

CSS animation 与 CSS transition 有何区别

1、animation :属性是一个简写属性,用于设置六个动画属性。2、transition:属性是一个简写属性,用于设置四个过渡属性。二、特点不同 1、animation :animation: name duration timing-function delay iteration-count direction...

css3过渡和动画的区别详解

一、CSS3 过渡 transition css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值 transition-property:检索或...

css3中新增了哪些动画效果

animation CSS3中真正的动画属性是animation,而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上,CSS3所支持的动画效果只是填充动画,也就是说先设定整个动画生命周期中的几个关键状态(key frame,...

CSS3中translate,transform和translation的区别和联系

位置参数。transform:变形。改变 CSS3中主要包括 旋转:rotate() 顺时针旋转给定的角度,允许负值 rotate(30deg)。transition: 允许CSS属性值在一定的时间区间内平滑的过渡,需要事件的触发,例如单击、获取焦点、失去焦点等。

CSS3中translate,transform和translation的区别和联系

例如。改变 CSS3中主要包括旋转; -webkit-transform: 用法transform,、失去焦点等 transition,100px): translate(50px: bottom left, translate,20deg) 缩放:transition; -o-transform.x,代表沿x轴和y轴平移的距离 所有...

CSS3中translate,transform和translation的区别和联系

skew -webkit-transform:scale(2);-webkit-transform:skew(20deg,20deg)transition:过渡 主要是用在css3中过渡形状、颜色、位置等。比如:-webkit-transition:width 0.2s;/*元素的宽度发生改变时,会有个过渡的动画*/ ...

css3translate是什么意思

在CSS3中,translate是一种用于元素变换的CSS属性,它可以改变元素的位置,不影响其在文档流中的位置。translate属性可以应用于2D和3D变换。在CSS3中,translate属性用于对元素进行平移变换,改变元素在水平和垂直方向上的位置,...

Top