CSS3中的动画效果记录

当前位置 : 首页 > 网页制作 > CSS > CSS3中的动画效果记录

CSS3中的动画效果记录

来源: 作者: 时间:2016-01-23 10:51
今天要记录的是CSS3中的三种属性transform、transition以及animation,这三个属性大大提升了css处理动画的能力。一、Transform 变形 CSS中transform 属性允许你修改CSS可视化模型的坐标控件。使用
今天要记录的是CSS3中的三种属性transform、transition以及animation,这三个属性大大提升了css处理动画的能力。
 
一、Transform 变形
 
  CSS中transform 属性允许你修改CSS可视化模型的坐标控件。使用transform,元素可以安装设定的值变形、旋转、缩放、倾斜。
 
  语法:
 
   transform : none | <transform-function> [ <transform-function> ]* 
   也就是:
   transform: rotate | scale | skew | translate |matrix;
  对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。
 
 
 
  在IE9中,使用jQuery动态添加样式,不显示效果,其他显示正常。是因为IE9认为 -ms-transform是无效的脚本,不执行。请将 "-ms-transform"改为“msTransform”。
 
  这里介绍一个在线调试CSS3的工具,http://westciv.com,这个工具还可以调试Gradients、Shadows等属性。
 
  1、transform-origin属性
 
  transform的参照点默认为元素的中心点,如果要改变这个参照点,可以是用transform-origin属性进行自定义。受影响变形函数:rotate()、scale()、skew()、matrix()。语法:
 
transform-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] 
  
 
 
 
  2、旋转rotate
 
  从原点(由transform-origin属性指定)开始安装顺时针方向旋转元素一个特定的角度。
 
旋转30度,transform-origin为默认值 旋转30度,transform-origin为left,top
 
 
 
复制代码
.rotate{
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    -o-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    transform:rotate(30deg);
}
.transform_left_top{
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    -o-transform-origin:left top;
    -ms-transform-origin:left top;
    transform-origin:left top;
}
复制代码
   3、移动translate
 
   移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)
 
x轴移动50px,y轴移动20px
 
transform-origin为默认值
 
x轴移动50px,y轴移动20px
 
transform-origin为left,top
 
 
  设置transform-origin与不设置不影响移动。
 
复制代码
.translate{
    -webkit-transform:translate(50px,20px);
    -moz-transform:translate(50px,20px);
    -o-transform:translate(50px,20px);
    -ms-transform:translate(50px,20px);
    transform:translate(50px,20px);
}
复制代码
   4、缩放scale
 
  缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。
 
scale(1.5,1)
 
transform-origin为默认值
 
scale(1.5,1)
 
transform-origin为left,top
 
 
复制代码
.scale{
    -webkit-transform:scale(1.5,1);
    -moz-transform:scale(1.5,1);
    -o-transform:scale(1.5,1);
    -ms-transform:scale(1.5,1);
    transform:scale(1.5,1);
}
复制代码
   5、扭曲skew
 
  扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
 
skew(30deg, 10deg)
 
transform-origin为默认值
 
skew(30deg, 10deg)
 
transform-origin为left,top
 
 
复制代码
.skew{
    -webkit-transform:skew(30deg, 10deg);
    -moz-transform:skew(30deg, 10deg);
    -o-transform:skew(30deg, 10deg);
    -ms-transform:skew(30deg, 10deg);
    transform:skew(30deg, 10deg);
}
复制代码
  6、矩阵matrix
 
  matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,matrix矩阵是transform变换的基础,可以应付很多高端的效果,算是一种高级应用技巧。网上有专门介绍这个的用法,我这里就不详细介绍了。有个在线编辑matrix的网站,useragentman.com。可以在线调试,下图所示:
 
 
 
 w3school在线测试:
 
描述 测试
none
 
定义不进行转换。 测试
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)
 
定义 2D 转换。 测试
translate3d(x,y,z)
 
定义 3D 转换。
translateX(x)
 
定义转换,只是用 X 轴的值。 测试
translateY(y)
 
定义转换,只是用 Y 轴的值。 测试
translateZ(z)
 
定义 3D 转换,只是用 Z 轴的值。
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(angle)
 
定义沿着 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 转换元素定义透视视图。
二、Transition过渡
 
  W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
 
语法:
 
复制代码
transition : [<'transition-property'> || 
    <'transition-duration'> || 
    <'transition-timing-function'> ||
    <'transition-delay'> 
    [,
        [   <'transition-property'> || 
            <'transition-duration'> || 
            <'transition-timing-function'> || 
            <'transition-delay'>
        ]
    ]*                         
复制代码
属性 说明
transition-property
 
规定设置过渡效果的 CSS 属性的名称。
transition-duration
 
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function
 
规定速度效果的速度曲线。
transition-delay
 
定义过渡效果何时开始。
 
 
  1、transition-property
 
  transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名)。当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。
 
  2、transition-duration
 
  transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。
 
  3、transition-timing-function
 
  transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:
 
ease
 
(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
linear
 
(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in
 
(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out
 
(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out
 
(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier
 
(该值允许你去自定义一个时间曲线)可以使用工具网站来定制
  cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default
 
  
 
  其他几个属性的示意图:
 
  
 
  4、transition-delay
 
  transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。
 
 
 
下面做个简单事例,在移到方块的时候,将方块的width增加
 
:hover之前 :hover之后
 
复制代码
.a_border{
    display:block;
    width:80px;
    background:#e0e0e0;
    text-align:center;
    line-height:80px
}
a.a_border:hover{
    width:150px;
    -webkit-transition:width 0.5s linear 1s;
    -moz-transition:width 0.5s linear 1s;
    -o-transition:width 0.5s linear 1s;
    -ms-transition:width 0.5s linear 1s;
    transition:width 0.5s linear 1s;
}
复制代码
三、Animation动画
 
  通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 Script。3的Animation是由“keyframes”这个属性来实现动画效果,Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。可以在这个Tencent网站上面做在线的动画调试。
 
  各自的语法:
 
animation:<single-animation-name> || <time> || 
      <timing-function> || <time> || 
      <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
 keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
 keyframes-blocks: [ keyframe-selectors block ]* ;
 keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
 
 
 
 
 
 
属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0,意味着没有动画效果。 3
animation-timing-function
规定动画的速度曲线。默认是 "ease"。
 
还有linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)
 
3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count
规定动画被播放的次数。默认是 1。下面是其他值:
 
"infinite":规定动画应该无限次播放
 
3
animation-direction
规定动画是否在下一周期逆向地播放。默认是 "normal"。下面是其他值:
 
"alternate":动画应该轮流反向播放
 
"reverse":动画反向运行,方向始终与normal相反。(FF14.0.1以下不支持)
 
"alternate":动画会循环正反方向交替运动,奇数次(1、3、5……)会正常运动,偶数次(2、4、6……)会反向运动,即所有相关联的值都会反向。
 
"alternate-reverse":动画从反向开始,再正反方向交替运动,运动方向始终与alternate定义的相反。(FF14.0.1以下不支持)
 
3
animation-play-state
规定动画是否正在运行或暂停。默认是 "running"
 
"paused"是指规定动画已暂停
 
3
animation-fill-mode
规定对象动画时间之外的状态。
 
"forwards"指当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
 
"backwards"指在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
 
"both"指向前和向后填充模式都被应用
 
3
看一个实例:
 
这句话I am moving将会在左右来回移动,并且在执行到一半的时候字体放大。
 
 
 
 
 
复制代码
.animation1{
    -moz-animation-duration: 3s;
    -moz-animation-name: slidein;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    
    -webkit-animation-duration: 3s;
    -webkit-animation-name: slidein;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    
    -o-animation-duration: 3s;
    -o-animation-name: slidein;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    
    -ms-animation-duration: 3s;
    -ms-animation-name: slidein;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: alternate;
    
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes slidein {
    from {margin-left:100%;width:300%}
    50% {font-size: 300%;margin-left: 25%;width: 150%;}
    to {margin-left:0%;width:100%;}
}
@-moz-keyframes slidein {
    from {margin-left:100%;width:300%}
    50% {font-size: 300%;margin-left: 25%;width: 150%;}
    to {margin-left:0%;width:100%;}
}
@-webkit-keyframes slidein {
    from {margin-left:100%;width:300%}
    50% {font-size: 300%;margin-left: 25%;width: 150%;}
    to {margin-left:0%;width:100%;}
}
@-o-keyframes slidein {
    from {margin-left:100%;width:300%}
    50% {font-size: 300%;margin-left: 25%;width: 150%;}
    to {margin-left:0%;width:100%;}
@-ms-keyframes slidein {
    from {margin-left:100%;width:300%}
    50% {font-size: 300%;margin-left: 25%;width: 150%;}
    to {margin-left:0%;width:100%;}
Tag:
网友评论

<