css3的动画属性

somboy 2020-02-29

一、css3的过渡属性:

1,transition-property

  检索或设置对象中的参与过渡的属性。

2,transition-duration

  检索或设置对象过渡的时间。

3,transition-delay

  检索或设置对象延迟过渡的时间。

4,transition-timing-function

  检索或设置对象过渡的动画属性。

简写方法:

  transition:属性值1 属性值2 属性值3 属性值4;

  属性值1:需要参与过渡的属性/all(默认值)

    能支持过渡的属性都会被选中进行过渡变换。

  属性值2:过渡的时间,单位(s  ms )(动画持续多久的时间)

  属性值3:延迟的时间,单位(s  ms)(鼠标放上去延迟的时间,延迟后开始过渡)

  属性值4:动画的类型(匀速/linear 匀加速 匀减速 先加速后减速  贝塞尔曲线 。。。)

需要注意的地方:transition 必须通过鼠标事件触发,例如:鼠标滑过   :hover

有了过渡属性,我们还差的就是过渡的动画了,有平移 旋转 放大 缩放 等。这些动画都是在一个2D的平面空间内完成的,这里用到的变形属性就是transform了。

css3-2D位移:

  transform:translate(参数1 参数2);(参数就是在坐标轴XY轴上的距离,当然可以为负数,正值往右向下,负值往左向上。)

    参数1:在坐标轴X轴移动的距离

    参数2:在坐标轴Y轴移动的距离

  单独设置X/Y:transform:translateX/Y(参数);

css3-2D缩放:

  transform:scale(参数1 参数2);(参数0-1以内为缩小,大于1为放大 相同参数写一个就可以)

    参数1:在坐标轴X轴缩放的比例

    参数2:在坐标轴Y轴缩放的比例

  单独设置X/Y:transform:scaleX/Y(参数);

css3-2D旋转:

  transform:rotate(参数);

    参数单位deg 默认绕着中心点转)

  单独设置X/Y:transform:rotateX/Y(参数);

css3-2D倾斜:

  transform:skew(参数)

    单位deg

  单独设置X/Y:transform:skewX/Y(参数);

这些的变形原点都是默认的中心位置,我们也是可以可以改变的!

transform-origin:水平方向 垂直方向     /     left right    /    10px 10px    /    50%;

如果有两个功能函数呢?

我们一般都是先写位置  再写旋转。这样有一个好处就是比较规范 不容易出BUG,兼容性更好。

相关推荐