动画的基本原理:改变属性值(任何属性都可以),同时给一个持续时间,每一个小时间段改变一点,直到持续时间结束,属性修改全部完成。这就形成了动态效果。
一、CSS 3 新增了一些用来实现动画效果的属性。
可以实现以前通常需要使用javascript或者flash才能实现的效果。
比如:对HTML元素进行平稳 缩放 旋转 倾斜 以及添加过渡效果。并且可以将这些组合成动画效果来进行展示
1、2D转换
语法格式:
transorm:值
none
matrix(<n>,<n>,<n>,<n>,<n>,<n>) 矩阵变换
translate 平移 单位像素 px
translateX
translateY
rotate 旋转 单位 度 deg
scale 缩放 单位 无 倍数比如 0.7
scaleX
scaleY
skew 倾斜 单位 度 deg
skewX
skewY
注:主流浏览器没有支持标准的transform属性,需要加前缀
2、以上转换的中心默认都是元素的中心,可以通过下列属性改变转换的中心点(原点)
transform-origin
值:
<percentage> 用百分比指定坐标值,可以为负
<length> 用长度值指定坐标值,可以为负
left 指定原点的横坐标为left,居左
center 指定原点的横坐标为center
right 指定原点的横坐标为right
top 以下三个为指定原点的纵坐标。
center
bottom
注:主流浏览器没有支持标准的transform-origin属性,需要加前缀
3、过渡效果
transition属性。
该属性可以控制HTML元素的某个属性发生改变时经历的时间,并且以平滑渐变的方式发生改变,从而形成动画效果。
[transition-property] || [transition-duration] || [transiton-timing-function] || [transition-delay]
用于指定参与过渡的属性
用于指定过渡持续的时间
用于指定过渡的动画类型
用于指定过渡的延迟时间
注:注:主流浏览器没有支持标准的transition属性,需要加前缀
3.1指定过渡持续时间:
tranistion-duration:<time> [,<time>] *
说明:如果存在多个属性值,以逗号“,”进行隔开。
注:主流浏览器没有支持标准的tranistion-duration属性,需要加前缀
3.2指定参与过渡的属性
transition-property:all | none | <property> [,< property >] *
说明:
默认值,表示所有可以进行过渡的属性。
表示不指定过渡的属性
表示指定要进行过渡的属性。可以同时指定多个属性值,以逗号“,”进行分隔
注:主流浏览器没有支持标准的transition-property属性,需要加前缀
3.3指定过渡的动画类型
transition-timing-function: linear | ease | ease-in | ease-out| ease-in-out | cubic-bezier(x1,y1,x2,y2) [如果有多个属性只需要再重复]
linear:线性过度,匀速加速==贝塞尔曲线(0.0,0.0,1.0,1.0)
ease:平滑过渡,过渡的速度会慢慢的慢下来==(0.25,0.1,0.25,1.0)
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:先加速再减速
cubic-bezier(x1,y1,x2,y2) 值都在0-1之间,或者无效。
注:主流浏览器没有支持标准的transition-timing-function属性,需要加前缀
3.4指定过渡的延迟时间
过渡延迟多长时间才开始
transition-delay:<time> [,<time>] *
time:单位s,值为数字
如果存在多个属性值,以逗号隔开,
注:主流浏览器没有支持标准的transition-delay属性,需要加前缀
4、Animation 动画
Animation动画允许开发者定义多个关键帧,而且浏览器会自动计算并插入关键帧之间的虚拟关键帧,从而形成比较流畅的动画效果。
步骤:在实现Animation动画时,首先需要定义关键帧,然后应用动画的相关属性来执行变化。
4.1 关键帧
@keyframes name
{
<keyframes-blocks>
}
注:需要添加前缀比如 :@-moz-keyframes
name:定义一个动画名称,该动画名称被animation-name属性所使用。
<keyframes-blocks>:定义动画在不同时间段的样式规则。包括两种形式
形式A:
from
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
to
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
形式B:
百分比1
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
百分比2
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
....
百分比n
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
注:百分比为0%-100%;
4.2动画属性 animation
要实现Animation动画,在定义了关键帧以后,还需要使用动画的相关属性来执行关键帧的变化。
CSS 3 为Animation动画提供了下面的属性。
animation:复合属性,用于指定对象所应用的动画特效
animation:-name:用于指定对象所应用的动画名称
animation-duration:持续时间,单位为s
animation-timing-function:用于指定对象动画的过渡类型,其值与transition-timing-function属性值相同。
animation-delay
animation-iteration-count:用于指定对象动画的循环次数,infinite表示无限次循环。
animation-direction:用于指定对象动画在循环中是否反向运动,normal表示正常方向,alternate表示正常与反向交替
animation-play-state:用于指定对象动画的状态,值为running表示运动 pasued表示暂停
animation-fill-mode:用于指定对象动画时间之外的状态。比如开始时,
注:最好都加前缀 ,使用动画可以形成任何想要的效果(因为可以改变任何元素的任何属性,这也是javascript实现
动态效果的原理)
一、CSS 3 新增了一些用来实现动画效果的属性。
可以实现以前通常需要使用javascript或者flash才能实现的效果。
比如:对HTML元素进行平稳 缩放 旋转 倾斜 以及添加过渡效果。并且可以将这些组合成动画效果来进行展示
1、2D转换
语法格式:
transorm:值
none
matrix(<n>,<n>,<n>,<n>,<n>,<n>) 矩阵变换
translate 平移 单位像素 px
translateX
translateY
rotate 旋转 单位 度 deg
scale 缩放 单位 无 倍数比如 0.7
scaleX
scaleY
skew 倾斜 单位 度 deg
skewX
skewY
注:主流浏览器没有支持标准的transform属性,需要加前缀
2、以上转换的中心默认都是元素的中心,可以通过下列属性改变转换的中心点(原点)
transform-origin
值:
<percentage> 用百分比指定坐标值,可以为负
<length> 用长度值指定坐标值,可以为负
left 指定原点的横坐标为left,居左
center 指定原点的横坐标为center
right 指定原点的横坐标为right
top 以下三个为指定原点的纵坐标。
center
bottom
注:主流浏览器没有支持标准的transform-origin属性,需要加前缀
3、过渡效果
transition属性。
该属性可以控制HTML元素的某个属性发生改变时经历的时间,并且以平滑渐变的方式发生改变,从而形成动画效果。
[transition-property] || [transition-duration] || [transiton-timing-function] || [transition-delay]
用于指定参与过渡的属性
用于指定过渡持续的时间
用于指定过渡的动画类型
用于指定过渡的延迟时间
注:注:主流浏览器没有支持标准的transition属性,需要加前缀
3.1指定过渡持续时间:
tranistion-duration:<time> [,<time>] *
说明:如果存在多个属性值,以逗号“,”进行隔开。
注:主流浏览器没有支持标准的tranistion-duration属性,需要加前缀
3.2指定参与过渡的属性
transition-property:all | none | <property> [,< property >] *
说明:
默认值,表示所有可以进行过渡的属性。
表示不指定过渡的属性
表示指定要进行过渡的属性。可以同时指定多个属性值,以逗号“,”进行分隔
注:主流浏览器没有支持标准的transition-property属性,需要加前缀
3.3指定过渡的动画类型
transition-timing-function: linear | ease | ease-in | ease-out| ease-in-out | cubic-bezier(x1,y1,x2,y2) [如果有多个属性只需要再重复]
linear:线性过度,匀速加速==贝塞尔曲线(0.0,0.0,1.0,1.0)
ease:平滑过渡,过渡的速度会慢慢的慢下来==(0.25,0.1,0.25,1.0)
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:先加速再减速
cubic-bezier(x1,y1,x2,y2) 值都在0-1之间,或者无效。
注:主流浏览器没有支持标准的transition-timing-function属性,需要加前缀
3.4指定过渡的延迟时间
过渡延迟多长时间才开始
transition-delay:<time> [,<time>] *
time:单位s,值为数字
如果存在多个属性值,以逗号隔开,
注:主流浏览器没有支持标准的transition-delay属性,需要加前缀
4、Animation 动画
Animation动画允许开发者定义多个关键帧,而且浏览器会自动计算并插入关键帧之间的虚拟关键帧,从而形成比较流畅的动画效果。
步骤:在实现Animation动画时,首先需要定义关键帧,然后应用动画的相关属性来执行变化。
4.1 关键帧
@keyframes name
{
<keyframes-blocks>
}
注:需要添加前缀比如 :@-moz-keyframes
name:定义一个动画名称,该动画名称被animation-name属性所使用。
<keyframes-blocks>:定义动画在不同时间段的样式规则。包括两种形式
形式A:
from
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
to
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
形式B:
百分比1
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
百分比2
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
....
百分比n
{
属性1:值1;
属性2:值2;
属性4:值3;
属性4:值4;
....
属性n:值n;
}
注:百分比为0%-100%;
4.2动画属性 animation
要实现Animation动画,在定义了关键帧以后,还需要使用动画的相关属性来执行关键帧的变化。
CSS 3 为Animation动画提供了下面的属性。
animation:复合属性,用于指定对象所应用的动画特效
animation:-name:用于指定对象所应用的动画名称
animation-duration:持续时间,单位为s
animation-timing-function:用于指定对象动画的过渡类型,其值与transition-timing-function属性值相同。
animation-delay
animation-iteration-count:用于指定对象动画的循环次数,infinite表示无限次循环。
animation-direction:用于指定对象动画在循环中是否反向运动,normal表示正常方向,alternate表示正常与反向交替
animation-play-state:用于指定对象动画的状态,值为running表示运动 pasued表示暂停
animation-fill-mode:用于指定对象动画时间之外的状态。比如开始时,
注:最好都加前缀 ,使用动画可以形成任何想要的效果(因为可以改变任何元素的任何属性,这也是javascript实现
动态效果的原理)