过渡与形变

过渡

属性: transition

三个属性合成 transition 属性,分别是以下几个(书写时注意顺序):

transition-property

表示,什么属性将用动画表现。

transition-duration

表示,变化过程持续的时间。

transition-timing-function

表示,变化时刻的调速函数。

形变

属性: transform

translate

位移,一个值表示X轴的位移,两个值表示X轴Y轴

scale

缩放。

  • 一个参数:水平和垂直同时缩放。
  • 两个参数:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

可以是负数,如果是负数则会图片翻转。

rotate

旋转,通过指定的角度参数对原元素指定一个 2D rotation (2D 旋转)。

单位角度:deg 。

skew

倾斜。

  • 一个参数时:表示水平方向的倾斜角度;
  • 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

skew的默认原点transform-origin是这个物件的中心点。

transform-origin

默认基点为中心点,可以通过关键词设置坐标值或关键词改变基点。

其他

1. css动画和 js 动画的区别

Copyright & copy https://www.zhuyuntao.cn 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-11-03 12:36:28

results matching ""

    No results matching ""