css动画

before和after伪元素(详解)

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意：

​ 一定要有content，否则伪元素不起作用

过渡(CSS3)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

在CSS3里使用transition可以实现补间动画（过渡效果），A状态，B状态，

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

变形 transform

transform 变换 变形的意思
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

移动 translate(x,y)

translate 移动平移的意思

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

让定位的盒子水平居中

缩放 scale(x,y)

对元素进行水平或垂直方向的缩放

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

​## transform-origin可以调整元素转换变形的原点

transform-origin: 50px 10px ; 

如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值

倾斜 skew(deg,deg)

transform:skew(45deg,0deg);

3D变形 transform

rotateX()

就是沿着 x 立体旋转.

rotateY()

沿着y轴进行旋转

rotateZ()

沿着z轴进行旋转

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

• 透视原理： 近大远小 。
• 浏览器透视：把近大远小的所有图像，透视在屏幕上。
• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

translateX(x)

仅水平方向移动**（X轴移动）

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

前后移动，直观的表现就是大小变化

translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

img {
	animation: car 5s infinite;
}
@keyframes car {
	0% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(1000px, 0, 0);
	}
	51% {
		transform: translate3d(1000px, 0, 0) rotateY(180deg);
	}
	100% {
		transform: translate3d(0, 0, 0) rotateY(180deg);
	}
}