HTML初学(六)

animation:Kato 1s linear 1s 1 (normal) forwards

    name(必写)

    duration(秒或者毫秒)

    timing-function(linear直线型、ease二次函数型、ease-in低速开始二次函数、ease-out低速结束二次函数、ease-in-out、cubic-bezier(n,n,n,n))

    delay(延迟时间)

    iteration-count(播放次数,infinite)

    direction(alternate轮流反向播放,normal)

    forwards(用来定格最后一帧)并非animation默认值

@keyframes name {

  0%,20%,80%{

  }

  40%,60%,100%{

  }

}

opacity不透明度,值为0~1之间

transform转换

  scale(n,n)2D平面进行缩放,分别对应XY轴

  scale3d(x,y,z)

  rotate(angle)旋转角度,旋转点默认为几何中心

  rotateX(angle)沿着穿越几何中心的X轴旋转,同理拥有Y,Z属性

  skew(x-angle,y-angle),XY轴同时进行倾斜转角

  skewX(angle)以及skewY(angle)单独进行X或Y转角

transform-origin 属性允许您改变被转换元素的位置。即中心点的位置,默认值为50% 50% 0(分别对应XYZ,其中XY可能的值为top、bottom、center、%和长度+单位等,Z的值只可能是长度+单位)。

perspective以及perspective-origin,二者目前只有-webkit-支持

posted @ 2016-07-03 22:48  奕军  阅读(175)  评论(0编辑  收藏  举报