transitionTransitiontransform2D,3D移动框的位置：定位框的外边距2D变换移动1.2D变换（transform）是CSS3中的颠覆性特性之一，可以实现位移、旋转、缩放等元素的影响。rotation:rotate:translatezoom:scale1.move:translate(后面可以跟px,%)(对span等行内元素无效)%是框本身的宽高语法：transform:translate(x,y);放在一起写（下面单独写）transform:translateX(n);变换：翻译Y（n）；2.旋转rotateo语法：transform:rotate(degree(deg));重点1.rotate后面是degree，单位是deg如rotate(45deg)2.角度为正时顺时针，负时逆时针3.默认旋转中心点为2.1元素的中心点。设置变换中心点transform-origin语法：transform-origin:(x,y)关键点：1.注意后面的参数x和y之间用空格隔开2.x的中心点y默认转换的中心点元素(50%50%)3.您还可以为xy中心设置像素或方向名词（左上下右）3.缩放：scale语法：transform:scale(x,y);注意：1.注意x和y用逗号隔开2.transform:acale(1,1):宽高加倍，相对于不放大3.transform:acale(2,2):既宽又宽height放大2倍4.transform:acale(2):只写一个参数，第二个参数同第一个参数，相当于scale(2,2)5.transform:acale(0.5,0.5)：缩小6.scale缩放最大的好处：可以设置转换中心点缩放，默认是以中心点缩放，不影响其他框。综合写法位移应放在最前面。变换：平移（10px，10px）旋转（180deg）比例（1.2）；1.先定义动画——使用关键帧定义动画（类似于定义类选择器）@keyframes动画名称{0%{}100%{}}动画顺序：1.0%是动画开始，100%是动画结束，像这样规则是动画顺序2.在@keyframes中指定一个css样式，创建一个从当前样式逐渐变化到新样式的动画效果3.动画是逐渐改变某个元素的效果从一种风格到另一种风格。你可以随意更改样式4.请使用百分比指定更改发生的时间，或者使用关键字“form”和“to”，相当于0%和100%2.使用时（调用)动画div{width:150px;高度：150px；背景色：粉色；调用动画animation-name：动画名称；durationanimation-auration：持续时间；}div{宽度：150px;高度：150px；背景色：粉色；/*动画名称*/animation-name:mycartoon;/*Duration*/animation-duration:3s;/*动作歌曲linelinearuniformspeed*/animation-timing-function:ease-in-out;/*什么时候开始（1秒后开始）*/animation-delay:1s;/*repeattimesiterationrepeatedconuttimesinfinite*//*animation-iteration-count:infinite;*//*是否反方向播放，默认正常，如果要反方向播放，写alternate*//*动画方向：交替；*//*动画结束后的状态，默认是backwards，回到初始状态，我们可以让他一直停留在结束状态forwards*/animation-fill-mode:forwards;}div:hover{/*鼠标经过div时停止div的动画，鼠标离开时动画继续*/animation-play-state:paused;}动画简称animation：动画名称durationmotioncurve何时开始播放次数是否反向动画开始或结束状态stepsanimation:mycartoon3slinear0sinfinitealternateforwardssteps();1.简写属性不包括animation-play-state2.暂停动画：animation-play-state:paused;经常和鼠标传递等其他东西结合使用3.我想让动画往回走，而不是直接跳回去animation-direction:alternate;4.盒子动画结束后停在结束位置：animation-fill-mode:forwards；speedcurveanimation-timing-function：指定动画的速度曲线，默认为ease值描述linear动画的速度从头到尾都是一样的，速度恒定。默认情况下，动画以低速开始，然后加速，最后减速结束。慢开始和结束steps()指定时间函数中的时间间隔（步）数
