css3动画

@keyframes

指定动画名称和动画效果

@keyframes names {
  from{opacity:1;}
  to{ opacity:0; }
}

@keyframes names1 {
  0%{color:#f00}
  40%{color:#333}
  100%{color:#999}
}
View Code

animation

复合属性。检索或设置对象所应用的动画特效

  • animation-name: 动画名称
  • animation-duration: 动画的持续时间
  • animation-timing-function: 过渡类型
    • linear: 线性过渡
    • ease: 平滑过渡
    • ease-in: 由慢到快
    • ease-out: 由快到慢
    • ease-in-out: 由慢到快再到慢
    • cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
  • animation-delay: 动画延迟的时间
  • animation-iteration-count: 动画的循环次数
  • animation-direction: 动画在循环中是否反向运动
    • normal: 正常方向
    • alternate:正常与反向交替
  • animation-play-state: 动画的状态
    • running: 运动
    • paused: 暂停
.a1{
    -webkit-transform:translate(60px);
    -webkit-animation:animations 2s ease-out;
    -moz-transform:translate(55px);
    -moz-animation:animations 2s ease-out;
    -o-transform:translate(55px);
    -o-animation:animations 2s ease-out;
    -ms-transform:translate(55px);
    -ms-animation:animations 2s ease-out;
    transform:translate(55px);
    animation:animations 2s ease-out;
}
@-webkit-keyframes ..
@-moz-keyframes ..
@-o-keyframes ..
@-ms-keyframes ..
@keyframes animations{
    0%{transform:translate(0);opacity:0;}
    50%{transform:translate(30px);opacity:1;}
    70%{transform:translate(35px);opacity:1;}
    100%{transform:translate(60px);opacity:0;}
}
View Code

transition

复合属性。检索或设置对象变换时的过渡

  • tranisiton-property: 设置参与过渡的属性
    • all: 所有可以进行过渡的css属性
    • none: 不指定过渡的css属性
    • <property>:指定要进行过渡的css属性
  • tranisition-duration: 设置过渡的持续时间
  • transition-timing-function: 设置过渡的动画类型
    • linear: 线性过渡
    • ease: 平滑过渡
    • ease-in: 由慢到快
    • ease-out: 由快到慢
    • ease-in-out: 由慢到快再到慢
    • cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
  • tranisition-delay: 设置延迟过渡的时间
例如

缩写方式:transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分方式:
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
View Code

transform(2D转换)

none:无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>]):指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translateX(<length>):指定对象X轴(水平方向)的平移
translateY(<length>):指定对象Y轴(垂直方向)的平移
rotate(<angle>):指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义
scale(<number>[, <number>]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX(<number>):指定对象X轴的(水平方向)缩放
scaleY(<number>):指定对象Y轴的(垂直方向)缩放
skew(<angle> [, <angle>]):指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewX(<angle>):指定对象X轴的(水平方向)扭曲
skewY(<angle>):指定对象Y轴的(垂直方向)扭曲

transform:matrix(0,1,1,1,10,10) //矩阵变换
transform:rotate(-15deg) //旋转
transform:translate(5%,10px) // 平移
transform:scale(.8) //缩放
transform:skew(-5deg) //扭曲
View Code

 

posted @ 2017-11-13 09:46  小时光  阅读(262)  评论(0编辑  收藏  举报