transitiontransitiontransition-property：指定设置过渡效果的CSS属性名称。过渡属性：宽度，高度；all表示所有属性，默认值transition-duration：指定完成过渡效果需要多少秒或毫秒。transition-duration需要加上时间单位是s秒ms毫秒1s===1000mstransition-delay:1s;定义过渡效果何时开始。转换延迟：2s；延时transition-delay:-2s的效果；delaytransition-timing-function的效果：指定速度效果的速度曲线。linear------------------匀速ease（默认值）----------------逐渐减速ease-in-----------------Accelerateease-out----------------Decelerateease-in-out-----------------先加速再减速cubic-bezier----------------（http://cubic-bezier.com）复合写法：transition:all2slineartransition:2slinearalltr??ansition:2salllinear注意：当总时间和延迟时间同时存在时，有一个顺序，第一个是总时间，第二个是延迟时间。transition:2s3slinearalltransformtransformtranslate:位移transform:translate(x,y);变换：translateX（100PX）；变换：平移Y（100PX）；transform:translateZ(100PX);scale:zoomtransform:scale(num);num是倍数，通常为1。transform:scale(num1,num2);两个值分别代表whtransform:scaleX(num);仅适用于宽度变换：scaleY(num)；onlyforheighttransform:scaleZ(num);rotate:Rotationtransform:rotate(num)num为旋转角度30deg正值：顺时针旋转负值：逆时针旋转表示一个角度：角度deg或弧度rad注：rotate()相当于rotateZ()。rotateX(3D)rotateY(3D)rotateZ(2D)skew:skewtransform:skew(num1,num2):num1和num2是角度，对于x和ytransform:skewX()transform:skewY()注：没有3dskew的写法。注意：设置多个值时的顺序；先执行后者，执行前的位移会受到后面要执行的缩放、旋转和斜切的影响。注意：所有变形不影响其他元素，类似于相对定位。注意：变形操作对inline（行内元素）不起作用。tranform-origin基点位置主要是旋转和缩放，默认以中心点为基点。设置transform-origin的基点位置。动画动画原理：逐帧动画。整个演练过程将分为100个部分。animation-name：设置动画的名称（自定义）animation-duration：动画的持续时间animation-delay：动画的延迟时间animation-iteration-count：动画的重复次数，默认值为1、infiniteunlimitedanimation-timing-function:动画线性的运动形式----------------匀速缓动（默认值）----------------逐渐减慢ease-in----------------加速ease-out-----------------Slowdownease-in-out------------------先加速再减速cubic-bezier----------------（http://cubic-bezier.com）animation-fill-mode:指定动画效果是在动画播放之前还是之后可见。无（默认）：运动结束后返回初始位置，如有延时，让0%在延时后生效backwards:在有延时的情况下，让0%在延时前生效:运动结束后，停止到结束位置both:backwards和forwards同时生效animation-direction:该属性定义了动画是否要依次反向播放。alternate:一个正向（0%~100%），一个反向（100%~0%）reverse：总是反向，从100%~0%normal（默认值）：总是正向，从0%~100%@keyframesanimationname{from{}/*起始位置*/相当于0%to{}/*结束位置*/相当于100%}注：默认情况下，元素移动后，会停在起始位置。一个强大的预设css3动画库。官网地址：https://daneden.github.io/ani...基本使用：animated:基类（基础样式，每个动画效果都需要添加）infinite:无限个动画CSS3gradientbackground-image:linear-渐变（到顶部，红色，蓝色）；背景图像：线性渐变（numdeg，red，blue）；背景图像：线性渐变（红色25%，蓝色75%）；linear-gradient：线性渐变到顶部：指示去哪里。numdeg：角度从底部中点、底部位置开始，顺时针旋转。red25%,blue75%表示从25%到75%逐渐变化，0~25%和75~100%之间没有变化。径向渐变：径向渐变背景：线性渐变（红色25%、蓝色25%、蓝色50%、绿色50%、绿色75%、橙色75%、橙色100%）；Colortextshadowtext-shadowxyblurcolorMulti-shadow注意：默认情况下，阴影的颜色与文本的颜色相同。boxshadowbox-shadowxyblur:blurvaluespread:rangecolorinset:innershadowoutset（默认值：outershadow，写outset不生效，不写就是outershadow）multipleshadows注意：默认box阴影是黑色的。
