js动画篇

动画

一. @keyframes规则是创建动画，它指定一个css样式和动画将逐步从当前样式更改为新的样式

当在keyframes创建动画时，把他绑定到一个选择器，否则动画不会有任何效果，至少指定这两个动画属性

• 规定动画名称
• 规定动画时长
• animation: myfirst 5s;

二 . animation属性

语法：

animation: name duration time-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的keyframe名称

animation-duration 规定完成动画所花费的时间，以s/ms记

animation-time-function 规定动画的速度曲线

animation-iteration-count 规定动画应该播放的次数

animation-direction 规定是否应该轮流方向播放动画

注意：请始终规定animation-duration属性，否则时长为0，就不会播放动画。

三 . animation-delay属性

1.定义动画什么时候开始（s/ms）

• 可为负值，-2s使动画马上开始，但跳过2s进入动画

四 . animation-direction属性

1.animation-direction：属性控制如何在reverse或alternate周期播放动画。

如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

• 属性值

值	描述
normal	以正常的方式播放动画
reverse	以相反方向播放动画
alternate	播放动画作为正常每奇数时间（1,3,5等）和反方向每偶数时间（2,4,6，等…）
alternate-reverse	在每个奇数时间（1,3,5等）在相反方向上播放动画，并且在每个偶数时间（2,4,6等等）的正常方向上播放动画

五 . animation-duration属性

1.定义完成一个动画需要的时间s/ms

animation-duration：time；

六 . animation-fill-mode属性

1.设置样式以在动画不播放时应用元素

• animation-fill-mode:none | forwards | backwards |both |initial |inherit ;

  值	描述
  none	默认值，无样式

  forwards 动画结束后，使用元素的结束属性值

  backwards 使用元素的起始值

  both 动画遵循向前向后的规则

七 . animation-iteration-count属性

1 . 定义动画应该播放几次

值	描述
n	定义播放动画多少次。 默认值为1
infinite	指定动画应该播放无限次（永远）

八 . animation-name属性

1. animation-name属性为@keyframes动画规定名称

值	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

九 . animation-play-state属性

1.设置是否运行或者暂停动画

你可以在js中使用该属性，这样就可以在播放过程中暂停动画

animation-play-state：paused | running；

十 . animation-timing-function属性

1 . 指定动画速度曲线

​ 速度曲线定义动画从一套CSS样式变为另一套所用的时间，速度曲线用于使变化更为平滑

​ animation-timing-function : linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n);

值	描述
linear	动画从开始到结束具有相同的速度。
ease	动画有一个缓慢的开始，然后快，结束慢。
ease-in	动画有一个缓慢的开始。
ease-out	动画结束缓慢。
ease-in-out	动画具有缓慢的开始和慢的结束。
cubic-bezier(n,n,n,n)	在立方贝塞尔函数中定义速度函数。 可能的值是从0到1的数字值。

---

转换transform

一 . 2D转换

1.旋转transform : rotate(30deg);

在给定度数顺时针旋转的元素。负值表示逆时针deg表示度数。

2.移动 transform:translate(50px,100px);

往左往上为正

3.缩放 transform：scale（2，4）；

scale（2,4）转变宽度为原来的大小的2倍，和其原始大小4倍的高度。

4.倾斜 transform：skew（30deg，20deg）；

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX( );表示只在X轴(水平方向)倾斜。

• skewY( );表示只在Y轴(垂直方向)倾斜。
• skew(30deg,20deg) 是元素在X轴和Y轴上倾斜20度30度。

总的语法

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

二 . transform-origin

1.transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值：top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

2.transform-style属性指定嵌套元素是怎么在三维空间中呈现

• transform-style: flat | preserve-3d;

  值	描述
  flat	子元素将不保留其 3D 位置。
  preserve-3d	子元素将保留其 3D 位置。

让转换的子元素保留3D转换：

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome /
-webkit-transform-style: preserve-3d; / Safari and Chrome */
}

transition属性过渡

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

• transition-property属性指定css属性的nametransition效果（transition效果时将会启动指定的css属性的变化。

• 一个转场效果通常发生在当鼠标悬停在一个元素上

• 始终指定transition-duration属性，否则持续时间为0，transition不会有效果默认值是all，多项改变要添加多个样式的变换效果，添加的属性由逗号分隔

  transition-property: none|all| property;

  值	描述
  none	没有属性会获得过渡效果。
  all	所有属性都将获得过渡效果。
  property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

三 . 透视3D属性perspective

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。perspective 属性只影响 3D 转换元素；定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

一般跟perspective-origin属性配合使用，默认值都是50%

四 。 backface-visibility属性

1. backface-visibility属性定义当元素不面向屏幕时是否可见，默认可见

如果在旋转元素不希望看到其背面时，该属性很有用。

backface-visibility: visible|hidden;

值	描述
visible	默认值。 背面是可见的。
hidden	背面是不可见的。

五 . 盒阴影box-shadow

box-shadow : 向左偏移量 向下偏移量 阴影半径 颜色；

注意：向右向下为正

六 . 边界图片border-image

border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像

border-image:url(border.png) 30 30 round;

速记属性

border-image：source slice width outset repeat；

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	这个例子演示了如何创建一个border-image 属性的按钮。

• border-image-source: url(border.png);

值	说明
none	没有图像被使用
image	边框使用图像的路径

• border-image-outset: length|number（代表对应的border-width的倍数）;

  注释：border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。

• border-image-width: number|%|auto;

  注意：

  border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

  值	描述
  number	代表对应的 border-width 的倍数。
  %	参考边框图像区域的尺寸：区域的高度影响水平偏移，宽度影响垂直偏移。
  auto	如果规定该属性，则宽度为对应的图像切片的固有宽度。

七 . border-collapse 属性

设置表格的边框是否被合并为一个单一的边框

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

八 .border-color:红，绿，蓝,粉红色;

• 上边框是红色
• 右边框是绿色
• 底部边框是蓝
• 左边框是粉红色

border-color：红，绿，蓝;

• 上边框是红色
• 左，右边框是绿色
• 底部边框是蓝

border-color：红，绿;

• 顶部和底部边框是红色
• 左右边框是绿色

border-color：红色;

• 所有四个边框是红色

请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

值	说明
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

颜色渐变

一 . 线性渐变（Linear Gradients）

• background: linear-gradient(direction, color-stop1, color-stop2, …);
  • background: -webkit-linear-gradient(red, blue); /* Safari */
  • background: -o-linear-gradient(red, blue); /* Opera **/ *
  • background: -moz-linear-gradient(red, blue); /* Firefox */
  • background: linear-gradient(red, blue); /* 标准的语法 */

二 . 径向渐变（Radial Gradients）

• 默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

• background: radial-gradient(center, shape size, start-color, …, last-color);

• 径向渐变 - 颜色结点不均匀分布

  • background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

• shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

  不同尺寸大小关键字的使用

  size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

三 . 透明度transparency

• 用于创建减弱变淡的效果；为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
• repeating-linear-gradient() 函数用于重复线性渐变：