前端复习2-动画

动画

animation

 animation: name(起的特效名称) 5s(5s转完) linear(转动速度呈线性  匀速) 2s(开始转动之前有2s的延迟) infinite(无限终止的转下去);

要配合@keyframe使用

 @keyframes name /*特效名称*/ {
             form{
                 transform: rotate(0);
             }
             3%{
                 transform: rotate(180deg);
             }
             to{
                 transform: rotate(360deg);
             }
 ​
         }

transition

代码格式

 transition: property duration timing-function delay;

值	描述
property	置过渡效果的 CSS 属性的名称
duration	完成过渡效果需要多少秒或毫秒
timing-function（可选）	速度效果的速度曲线
delay	过渡效果何时开始

transform

 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 转换元素定义透视视图。