美文网首页
使用Move.js创建CSS3动画

使用Move.js创建CSS3动画

作者: jiaomeichen | 来源:发表于2017-05-31 15:16 被阅读0次

    1、.set(prop,val)方法用于设置元素的CSS属性,参数:属性,属性值

    2、.add(prop,val)方法用来增加其已经设置的属性值,该方法必须数值型值,以便用来增加。参数:属性,其增量(值会在原来基础上加)

    3、.sub(prop,val)方法是add()的逆过程,他接受两个相同的参数,但其值将从属性值中减去。参数:属性,其减量(值会在原来的基础上减)

    4、.rotate(deg)方法用于设置元素旋转。相当于添加transform:rotate(90deg)到元素上。

    5、.duration(n)方法可以设置动画的播放时间。参数为“2s”

    6、.translate(x[,y])方法用于修改元素的默认位置。参数为(200,300)

    7、.x()and .y()方法用于调整元素的xy坐标,参数可正可负。.x(-20)

    8、.skew(x,y)方法用于调整一个相对于x和y轴的角度。

    9、.scale(x,y)方法用于放大或缩小元素的大小。

    10、.ease(fn)方法指定了过渡的行为。每个ease函数是in、out、in-out、snap、cubic-bezeir等。

            使用方法:.ease("in").x(200)

    11、.end()方法标识动画的结束。技术上,该方法触发动画的播放。该方法可接受一个可选的callback回调函数。

    12、.delay(n)方法提供一个时间的数值作为动画的延时。

           使用方法:.set("background","pink").delay(1000).end()

    13、.then()方法用于分割动画为两个集合,并按顺序执行。


    使用案例:move("obj").scale(1.5).end()

                      move("obj").set("color", "#5b5b5b").duration('1s').end()

                      move("obj").rotate(90deg).end()

    相关文章

      网友评论

          本文标题: 使用Move.js创建CSS3动画

          本文链接:https://www.haomeiwen.com/subject/gefjfxtx.html