码迷,mamicode.com
首页 > Web开发 > 详细

css3变形 过渡 动画

时间:2017-08-07 23:12:28      阅读:403      评论:0      收藏:0      [点我收藏+]

标签:平面   规则   rspec   css   指定   ima   alt   元素   元素定位   

CSS3 变形/变换

相关属性

  • transform 设置或检索对象的检索(none 2D 3D)
  • transform-origin:设置或检索对象以某个原点进行检索
  • transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内
  • perspective: 长度单位 指定观察者距离平面的距离
  • perspective-origin 指定观察者的位置 left/right/center
  • backface-visibialbe: visible(默认)/hidden

变形方法 transform-function

  • 2d
  • 位移
    • translate(x,y)
    • translatex()
    • translatey()
  • 缩放
    • scale(x,y)
    • scalex()
    • scaley()
  • 旋转
    • rotate(deg)
  • 倾斜
    • skew(x,y)
    • skewx()
    • skewy()
  • 3d
  • 位移
    • translatez()
    • translate3d(x,y,z)
  • 缩放
    • scalez()
    • scale3d(x,y,z)
  • 旋转
    • rotatex()
    • rotatey()
    • rotatez()
    • rotate3d(x,y,zdeg)

CSS过渡

相关属性

  • trasition
  • transition-property 设置对象中的参与过渡属性 (可以设置多个属性值,以逗号隔开)
    • 默认为all:所有可以进行过渡的css属性
    • none:不指定过渡的css属性
  • transition-timing-function 设置对象过渡持续的时间
  • transition-duriation
  • transition-delay

触发时机

  • 伪类选择器
  • JS触发
  • 媒体查询

可以过渡的属性

  • 长度
  • 颜色
  • 变换

CSS3 动画

相关属性

  • 关键帧语法:@keyframes{from to }

  • animation 设置对象所应用的动画特效,如果提供多组属性值,以逗号进行分割

    • 注意:如果只提供一个time参数,则为动画的持续时间;
    • 若提供二个time参数,则第一个为持续时间,第二个为拖延时间
  • animation-name 设置对象所应用的动画名称(必须与规则@keyframes配合使用,因为动画名称由@keyframes定义)
  • animation-duration 设置对象动画的持续时间
  • animation-timing-function 设置对象动画的过渡类型
    • 值:ease(默认)平滑过渡,由快到慢
    • linear: 线性过渡
    • ease-in:由慢到快
    • ease-out:由快到慢
    • ease-in-out:由慢到快再到慢
  • animation-delay:指定对象动画的拖延时间
  • animation-iteration-count 循环次数
    • number:动画循环次数
    • infinite:无线循环
  • animation-dirction 设置对象动画在循环中是否反向运动
    • normal 正常反向(默认)
    • reverse 反方向运行
    • alternate:动画先正常运行后反向运行,并持续交替运行
    • alternate-reverse:动画先反向运行后再正向运行,并持续交替运行
  • animation-play-state: 设置对象动画的状态running(默认)/pasused
  • animation-fill-mode: 设置对象动画时间之外的状态
    • none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
    • forwards 在动画结束后(由animation-literation-count决定),动画将应用该属性值
    • backwards:动画将应用在animmation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值
    • both 动画遵循forwards和backwards的规则。也就是说,动画会在两个方向上扩展动画属性

关键帧

    #keyframes 动画名称{
        form{
        }
        to{
        }
    }

css3变形 过渡 动画

标签:平面   规则   rspec   css   指定   ima   alt   元素   元素定位   

原文地址:http://www.cnblogs.com/zgh929/p/7302013.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!