动画
一. @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
1 | 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属性定义当元素不面向屏幕时是否可见，默认可见
如果在旋转元素不希望看到其背面时，该属性很有用。
1 | 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 | 边框使用图像的路径 |
1
border-image-outset: length|number（代表对应的border-width的倍数）;
注释：border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。
1
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() 函数用于重复线性渐变：