CSS3动画

目录

• transform
  • perspective
  • perspective-origin
  • translate（x，y）/transla3d（x，y，z）
  • rotate（angle）
  • scale（x，y）/scale3d（x，y，z）
• transform-origin
• transition
• animation
• animation和transition的区别

transform

transform描述元素的静态样式，设置元素在二维或三维坐标下的位移，旋转，透视，缩放等属性。所有属性：https://www.w3school.com.cn/cssref/pr_transform.asp

常用属性：

perspective

3D图像到屏幕的距离，以像素为单位（可作为独立CSS属性）

perspective-origin

3D图像的开始位置，如perspective-origin：50% 50%；为图像在页面中间。（可作为独立CSS属性）

translate（x，y）/transla3d（x，y，z）

图像在二维/三维坐标的位置

rotate（angle）

旋转：
rotate（ndeg）元素绕中心旋转
rotateX（ndeg）元素绕X轴旋转
rotateY（ndeg）元素绕Y轴旋转
rotateZ（ndeg）元素绕Z轴旋转

scale（x，y）/scale3d（x，y，z）

图像在对应方向缩放。

transform-origin

图像变化的基准：bottom，top，坐标等。

transition

（简写属性）通常和hover等配合使用，由事件触发。
transition：property duration timing-function delay；
transition: transform 1s linear 1s；
定义了动画的属性，动画完成时间，过渡效果，延迟时间。

常用速度曲线：
linear：匀速（cubic-bezier(0,0,1,1)）
ease：开始和结束的时候慢速，中间变快（cubic-bezier(0.25,0.1,0.25,1)）
ease-in：慢速开始（cubic-bezier(0.42,0,1,1)）
ease-out：慢速结束（cubic-bezier(0,0,0.58,1)）
ease-in-out：慢速开始和结束（cubic-bezier(0.42,0,0.58,1)）
cubic-bezier为贝塞尔曲线

animation

（简写属性）必须结合@keyframes使用
animation：name duration timing-function delay iteration-count direction fill-mode；
名称，播放时间，过渡效果，延迟，播放次数，方向，结束方式

@keyframes drop{//动画名称
  0%{opacity: 0;}
  70%{transform: translateY(700px);}
  100%{transform: translateY(650px); opacity: 1;}
}
//在需要动画的元素上添加动画
animation: drop 0.5s ease forwards；

animation和transition的区别

1. 触发条件不同，transition通常和事件配合触发，animation加载后立即触发
2. animation可设置循环
3. animation可设定每一帧动画，transition只能设置头尾，animation可在不同帧单独设置变化的属性，transition所有属性要一起设置
4. transition与js的交互更紧密。