13 CSS3过渡属性、CSS3的transform 属性、CSS3动画属性、动画库

CSS3过渡属性

• 通过CSS3可以在不使用Flash动画或JavaScript的情况下，为元素从一种样式变 换为另一种样式时添加效果。而CSS3过渡就是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：

  规定你希望把效果添加到哪个CSS属性上 规定效果的时长

• transition-property 规定设置过渡效果的CSS属性的名称。

  • none 没有属性会获得过渡效果。

  • all 所有属性都将获得过渡效果。

  • property 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。

• transition-duration 规定完成过渡效果需要多少秒或毫秒。

  • time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是0,意

    味着不会有效果。

• transition-timing-function规定速度效果的速度曲线。

  • linear 规定以相同速度开始至结束的过渡效果。

  • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。

  • ease-in 规定以慢速开始的过渡效果。

  • ease-out 规定以慢速结束的过渡效果。

  • ease-in-out 规定以慢速开始和结束的过渡效果。

• transition-delay 定义过渡效果从何时开始。

  • time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

• transition属性简写

  • div {
        transition:width 1s linear 2s;
    }

CSS3的 transform 属性

• transform属性向元素应用2D或3D转换。该属性允许我们对元素进行位移、旋转、 缩放或倾斜。

• 语法：

  • transform: none|transform-functions:

    transform属性的初始值是none。

    transform-functions设置变形函数。如translate ()移动元素、rotate ()旋转元素、 scale()缩放元素、skew()倾斜元素等。

• 浏览器支持：

  • Internet Explorer 9 要求前缀-ms-版本，Internet Explorer 10、 Firefox 和Opera 支持 transform 属性。Chrome 和 Safari 低版本要求前缀-webkit-版本。目前大部分浏览器都支持transform标准属性。

• 2D 转换

  • 2D位移

    • 通过 translate () 函数能够重新定位元素的坐标。

    • translate (x, y) 水平方向和垂直方向同时移动

    • translateX(x) 仅水平方向移动(X轴移动)

    • translateY(Y) 仅垂直方向移动(Y轴移动)

    • x、y为正数表示X、Y轴正向位移，负数为反向位移。

      通过translate()方法，元素从其当前位置移动，根据给定的x坐标和y坐标

  • 2D旋转

    • 通过rotate()函数能够旋转指定的元素对象。

    • rotate(*deg) 参数表示角度值，取值单位是度deg正数表示顺时针旋转，负数表示逆时针旋转。

  • 2D缩放

    • 通过scale()函数能够缩放元素大小。

    • scale (x, y) 水平方向和垂直方向同时缩放

    • scaleX(x) 仅水平方向(X轴)缩放

    • scaleY(Y) 仅垂直方向(Y轴)缩放

    • scale()函数传递不同参数时，缩放动画的效果是不同的。参数为数值，可以是正数、 负数和小数，默认值为1;使用0到1之间的值缩小元素，使用超过1的值放大元素。负数 值则翻转元素，然后再缩放元素。

  • 2D倾斜

    • 通过skew()函数能够让元素倾斜显示。

    • skew(x，y) 水平方向和垂直方向同时倾斜

    • skewX(x) 仅水平方向(X轴)倾斜

    • skewY(Y) 仅垂直方向(Y轴)倾斜

• 定义变形原点

  • CSS变形原点默认为对象的中心点，如果要改变这个中心点，可以使用transform- origin 属性进行定义。

  • transform-origin: x y;

    transform-origin 接受两个参数，参数为一个值时，另一个值默认为center;它们 可以是百分比、em、px等具体值；也可以是left、center、right或者top、center、 bottom等描述性关键字。transform-origin的初始值为50% 50%

• 3D 转换

  • 3D变形有3d位移、3d缩放、3d旋转。3D的用法和2D差不多，只不过多了个Z轴的 值而己。注意skew扭曲是没有3D的。

  • transform-style 属性

    • 规定如何在3D空间中呈现被嵌套的元素。该属性必须与transform属性一同使用。

    • flat 子元素将不保留其3D位置。

    • preserve-3d子元素将保留其3D位置。

    • 注意：若同时设了 transform-style: preserve-3d;和overflow: hidden;, 3D 效果 将失效，等价于 transform-style: flat。

  • perspective 属性

    • 定义3D元素距视图的距离，以像素计算。当元素定义了 perspective属性后，其 子元素会获得透视效果，而不是元素本身。perspective属性只影响3D转换元素。

    • number元素距离视图的距离，以像素计。

    • none 默认值，与0相同，不设置透视。

• 3D位移

  • 在CSS3中，新増translateZ 3D位移函数。功能是让元素在3D空间沿z轴进行位移。

  • translateZ( t ) t指的是z轴的向量位移长度。当其值为负值时，元素在Z轴越移越远，导致元素变小。 反之当值为正值时，其在Z轴越移越近，导致元素变得较大。

  • translate3d(x, y, z)函数，可以同时设置元素在三个轴向的位移大小。

• 3D旋转

  • CSS3中定义的3D 旋转的函数有:rotateX、rotateY、rotateZ、rotate3d 等。

  • rotateX(a) a.指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；反之，如果为负值， 元素围绕X轴逆时针旋转。

  • rotateY(a) a.指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；反之，如果为负值， 元素围绕Y轴逆时针旋转。

  • rotateZ(a) a.指的是一个旋转角度值，如果为正值，元素围绕Z轴顺时针旋转；反之，如果为负值， 元素围绕Z轴逆时针旋转。

  • rotate3d(x, y, z, angle)

    • x：是一个0到1之间的数值，主要用来描述元素围绕X轴旋转的矢量值。

    • y：是一个0到1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。

    • Z：是一个0到1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。

    • angle： 一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。

• 3D缩放

  • scaleZ(z);

• CSS3动画属性

  animation

  定义动画过程

  @keyframes 动画名称{

  0% {动画开始

   

  }

  100% {动画结束

   

  }

  }

  • animation-name 动画名称（自定义）

    • keyframe name 规定需要绑定到选择器的keyframe的名称。

    • none 规定无动画效果（可用于覆盖来自级联的动画）。

  • animation-duration 完成动画的时间

    • time 规定完成动画所花费的时间。默认值是0,意味着没有动画效果。

  • animation-timing-function 动画完成曲线

    • linear 规定以相同速度开始至结束的过渡效果。

    • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。

    • ease-in 规定以慢速开始的过渡效果。

    • ease-out 规定以慢速结束的过渡效果。

    • ease-in-out 规定以慢速开始和结束的过渡效果。

  • animation-delay 延时

    • time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是0。

  • animation-iteration-count 动画播放的次数

    • n 定义动画播放次数的数值。

    • infinite 规定动画应该无限次播放。

  • animation-direction 是否轮流反向

    • 定义是否应该轮流反向播放动画。如果animation-direction值是"alternate", 则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。 注意：如果把动画设置为只播放一次，则该属性没有效果。

    • alternate 轮流反向播放

    • normal 默认正常

  • animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

    • none 不改变默认行为。

    • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

    • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

    • both 向前和向后填充模式都被应用。

  • animation-play-state 属性规定动画正在运行还是暂停。

    • paused 规定动画已暂停。

    • running 规定动画正在播放。

• 动画库

  • https://daneden.github.io/animate.css/
    <div class="animated bounce" id="" ></div>

  •  

原文：https://www.cnblogs.com/xue666888/p/14255308.html