css教程之动画与变换

css教程之动画与变换

一、变换 transform

1.transform设置或检索对象的转换

none：无转换

rotate()：2D旋转

scale()：2D缩放

skew() 斜切扭曲,第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

2.transform-origin 设置或检索对象以某个原点进行转换。

该属性提供2个参数值想x，y

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。

{transform-origin:0 0;}

<percentage>：用百分比指定坐标值。可以为负值。

<length>：用长度值指定坐标值。可以为负值。

left：指定原点的横坐标为left

center：指定原点的横坐标为center

right：指定原点的横坐标为right

top：指定原点的纵坐标为top

bottom：指定原点的纵坐标为bottom

3.transform-style：flat | preserve-3d

指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

二、过渡 transition

检索或设置对象变换时的过渡

  .box2{
    -webkit-transition: 
      background-color 3s ease-in,
      border 3s ease-in 1s;
    transform: rotate(10deg);
  }

<' transition-property '>：检索或设置对象中的参与过渡的属性

设置对象中的参与过渡的属性,如果提供多个属性值，以逗号进行分隔

<' transition-duration '>：检索或设置对象过渡的持续时间

<' transition-timing-function '>：检索或设置对象中过渡的动画类型

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

step-start：等同于 steps(1, start)

step-end：等同于 steps(1, end)

steps(<integer>[, [ start | end ] ]?)：

接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

<' transition-delay '>：检索或设置对象延迟过渡的时间

三、animation 动画

.ani1{

animation:opacity 2s ease-out 2s infinite normal;

}

<' animation-name '>：检索或设置对象所应用的动画名称

@keyframes opacity{

}

<' animation-duration '>：检索或设置对象动画的持续时间,如：1s

<' animation-timing-function '>：检索或设置对象动画的过渡类型,同transition

<' animation-delay '>：检索或设置对象动画延迟的时间,如：1s

<' animation-iteration-count '>：检索或设置对象动画的循环次数

infinite：无限循环

<number>：1 指定对象动画的具体循环次数

<' animation-direction '>：检索或设置对象动画在循环中是否反向运动

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行