Quelles sont les trois principales propriétés d'animation de CSS3

a:transition-property：检索或设置对象中的参与过渡的属性 b.transition-duration：检索或设置对象过渡的持续时间 c.transition-delay：检索或设置对象延迟过渡的时间 d.transition-timing-function：检索或设置对象中过渡的动画类型 简写： transition: 属性值1 属性值2 属性值3 属性值4 属性值1： 需要参与过渡属性 all ( 能支持过渡属性的都会过渡变换 默认值) 属性值2： 过渡的时间 s秒 ms 毫秒 属性值3： 延迟的时间 s秒 ms 毫秒 属性值4： 动画的类型（匀速、匀加速、匀减速........）

a.位移：transform:translate(参数1，参数2) 参数1：在X轴移动的距离 参数2：在Y轴移动的距离 ps:参数如果是正值的情况下：往右往下 负值：往左往上 单独设置X/Y的位移： transform:translateX(参数); transform:translateY(参数); b.缩放：transform:scale(参数1，参数2); 参数1：X轴缩放的比例 参数2：Y轴缩放的比例 ps:参数小于1,缩小；参数大于1，放大。如果两参数相同，写一个就行 单独设置X Y transform:scaleX(); transform:scaleY(); c.旋转：transform:rotate(); 默认情况下围绕中心点转动，转动的是度数，deg! 单独设置围绕某个轴（X Y） transform:rotateX() transform:rotateY() d.倾斜：transform:skew(); 单独设置围绕某个轴（X Y） transform:skewX() transform:skewY() 补充：如果有两个功能函数：先写位移 再写旋转。

span{ display: block; width: 300px; height: 150px; background: purple; transform: rotate(30deg); }

span{ display: block; width: 300px; height: 150px; background: purple; transform: rotateX(30deg); }

span{ display: block; width: 300px; height: 150px; background: purple; transform: rotateY(30deg); }

a.位移： transform:translate(x,y,z); translateX() translateY() translateZ(不能是百分比) b.旋转： transform:rotate(); rotateX() rotateY() rotateZ() //默认情况效果类似 rotate3D(x,y,z,a) [ 0不旋转。1旋转 ] - x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值； - y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值； - z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值； - a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

制定关键帧： @keyframes 关键帧的名称{ from{} to{} 或者 0%{ } 50%{ } 100%{ } } 调用关键帧 animation: 复合属性 animation-name 关键帧的名称 animation-duration 动画的持续的时间 animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线 step-start //没有动画中间的过渡效果。每次直接跳到下一帧开始的地方） animation-delay 动画的延迟 animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环) animation-direction 运动的方向 属性值： - reverse：反方向运行 （ 让关键帧从后往前执行 ） - alternate：动画先正常运行再反方向运行，并持续交替运行 - alternate-reverse：动画先反运行再正方向运行，并持续交替运行 animation-play-state 属性值： paused暂停 running运动 常用的写法： animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间

       
  
 
1
 
2
 
3
 
4
 
5
 
6