transitions(过渡)
被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。
主要包括四个属性:
执行变换的属性:transition-property 变换延续的时间:transition-duration 变换的速率变化:transition-timing-function 变换延迟时间:transition-delay。
1.transition-propery
语法:transition-property:none| all |[<IDENT>] [','<IDEBT>]* transition-property 是用来指定当前元素中一个属性改变时执行transition 效果,其主要有以下几个值:none(没有属性改变); all(所有属性改变)这个也是其默认值;indent(元素属性名) 当其值为none时,transiton马上停止执行,当指定为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, 3.percentage:真实的数字,如:如:word-spacing,width,vertical-align,top,right,bottom,left,padding, 4.integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性 5.number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性。 6.transform list 7.rectangle:通过x,y,width 和height(转为数值) 变换,如crop 8.visibility:离散步骤,在0 到1 数字范围之内,0 表示隐藏,1表示完全"显示",如visibility 9.shadow:作用于color,x,y,和blur(模糊),如text-shadow 10.gradient;通过每次停止时的位置和颜色进行变化。 11.paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似 12.space-separated list of above:如果列表有相同的项目数值, 13.a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化
2.transition-duration:
transition-duration : <time> [, <time>]* transition-duration 是用来指定元素,转换过程的持续时间 取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素, 包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。
3.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.58,1.0) 6.cubic-bezier:(该值允许你去定义一个时间曲线),特定的cubic-bezier曲线
4.transition-delay
transition-delay : <time> [, <time>]* transition-delay是用来指定一个动画执行开始执行的时间,也就是说当改变元素属性值后多长时间执行transtion 其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所 有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。
把几个transition 的声明串在一起,用逗号(”,“)隔开。
如:
a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}
transition一个速记法:transition: <property> <duration> <animation type> <delay> 如:
p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}
由于transition 最早是由webkit内核浏览器提出的, 为了支持大众类型的浏览器需要加前缀 //Mozilla内核 -moz-transition : //Webkit内核 -webkit-transition : //Opera -o-transition :
Animation Keyframes 具有其自己的语法规则 ,他的命名是由”@keyframes“ 开头,后面紧接着这个动画的名称 加上一堆花括号。 对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间 语法:
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式:
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,
@-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;
}
}
元素调用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;/*定义动画方式*/
}
属性 1.animation-name:
语法:animation-name: none | IDENT[,none | IDENT]*; animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名, 换句话说此处的IDENT要和Keyframes中的IDENT一致, 如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这 个属性跟前面所讲的transition一样,我们可以同时附 几个animation给一个元素,我们只需要用逗号“,”隔开。 2.animation-duratiuon 语法:animation-duration: <time>[,<time>]* animation-duration是用来指定元素播放动画所持续的时间长,取值:<time>为数值,单位为s (秒.)其默认值为“0”。 这个属性跟transition中的transition-duration使用方法是一样的。 3.animation-timing-function: animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。 他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。 具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。 4.animation-delay 语法:animation-delay: <time>[,<time>]* animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。 这个属性和transition-delayy使用方法是一样的。 5.animation-iteration-count animation-iteration-count:infinite | <number> [, infinite | <number>]* animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。 6.animation-direction 语法: animation-direction: normal | alternate [, normal | alternate]* animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时, 动画的每次循环都是向前播放; 另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。 7.animation-play-state 语法:animation-play-state:running | paused [, running | paused]* animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。 他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放, 我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。
Transform 字母上就是变形,改变的意思,在css3中transform主要包括一下几种,旋转rotate,扭曲skew,缩放scale和移动translate 以及矩阵变形matrix 语法:transform : none | <transform-function> [ <transform-function> ]* 也就是:
transform: rotate | scale | skew | translate |matrix;
none表示不进怎么变换;<transform=function>表示一个或者多个变换函数,以空格分开; 换句话说就是我们同时对一个元素进行transform的多种操作,例如 rotate,scale,translate 三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开, 但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
1.旋转rotate 通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。 transform-origin定义的是旋转的基点,其中angle是指旋转角度, 如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg): 2.移动translate 移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动); translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动) 3.缩放scale 缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放 (也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放); scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置, 缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。 4.扭曲skew 扭曲skew和translate,secale skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形); skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形) 5.矩阵matrix matrix(<number>, <number>, <number>, <number>, <number>, <number>) 以一个含六值的(a,b,c,d,e,f) 变换矩阵的形式指定一个2D变换, 相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素, 6.改变元素的基点 transform-origin 他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置, 换句话说我们没有使用transform-origin改变元素基点位置的情况下, transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
面对不同浏览器的内核 //Mozilla内核浏览器:firefox3.5+ -moz-transform-origin: x y; //Webkit内核浏览器:Safari and Chrome -webkit-transform-origin: x y; //Opera -o-transform-origin: x y ; //IE9 -ms-transform-origin: x y; //W3C标准
如坐标位置发生变化: 1.transform:translate(x,y):
.menu ul li.translate a:hover {
-moz-transform: translate(-10px,-10px);
-webkit-transform: translate(-10px,-10px);
-o-transform: translate(-10px,-10px);
-ms-transform: translate(-10px, -10px);
transform: translate(-10px,-10px);
}
2.transform:translateX(x)
.menu ul li.translate-x a:hover {
-moz-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-o-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
3.transform:translateY(y)
.menu ul li.translate-y a:hover {
-moz-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
4.transform:rotate(角度值)
.menu ul li.rotate a:hover {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
5.transform:scale(x,y)
.menu ul li.scale a:hover {
-moz-transform: scale(0.8,0.8);
-webkit-transform: scale(0.8,0.8);
-o-transform: scale(0.8,0.8);
-ms-transform: scale(0.8,0.8);
transform: scale(0.8,0.8);
}
6.transform:scaleX(x)
.menu ul li.scale-x a:hover {
-moz-transform: scaleX(0.8);
-webkit-transform: scaleX(0.8);
-o-transform: scaleX(0.8);
-ms-transform: scaleX(0.8);
transform: scaleX(0.8);
}
7.transform:scaleY(y)
.menu ul li.scale-y a:hover {
-moz-transform: scaleY(1.2);
-webkit-transform: scaleY(1.2);
-o-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
transform: scaleY(1.2);
}
8.transform:skew(x,y)
.menu ul li.skew a:hover {
-moz-transform: skew(45deg,15deg);
-webkit-transform: skew(45deg,15deg);
-o-transform: skew(45deg,15deg);
-ms-transform: skew(45deg,15deg);
transform: skew(45deg,15deg);
}
9.transform:skewX(x)
.menu ul li.skew-x a:hover {
-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
-o-transform: skewX(-30deg);
-ms-transform: skewX(-30deg);
transform: skewX(-30deg);
}
10.transform:skewY(y)
.menu ul li.skew-y a:hover {
-moz-transform: skewY(30deg);
-webkit-transform: skewY(30deg);
-o-transform: skewY(30deg);
-ms-transform: skewY(30deg);
transform: skewY(30deg);
}
11.transform:matrix(a,b,c,d,e,f)
.menu ul li.matrix a:hover {
-moz-transform: matrix(1,1,-1,0,0,0);
-webkit-transform: matrix(1,1,-1,0,0,0);
-o-transform: matrix(1,1,-1,0,0,0);
-ms-transform: matrix(1,1,-1,0,0,0);
transform: matrix(1,1,-1,0,0,0);
}