[前端笔记009]CSS布局之过渡、动画和变形-- transition、animation和transform

资源

• 推荐zeal:离线文档查看器 https://zealdocs.org/
• 推荐w3c:线上文档 https://www.w3school.com.cn/
• 本笔记参考视频，尚硅谷:BV1XJ411X7Ud
• 我的笔记：https://gitee.com/plusmile/stackedit-app-data.git
• 我的CSS文件：https://gitee.com/plusmile/front-code.git

过渡 transition

• 过渡：transition，指定一个属性发生变化时的切换方式，可以创建一个动画效果，提升体验
• transition-property:指定要执行过渡的属性,多个属性逗号隔开。大部分属性都要过渡，则使用all，大部分属性都支持过渡，需要有具体数值的，而且必须是从一个有效值向另一个有效数值进行过渡， auto不是有效数值。
  例：transition-property:width,height
• transition-duration:指定过渡效果的持续时间，单位是 s 和 ms,可以给property中的属性分别指定时间。
  例：transition-duration:2s，100ms
• transtion-timing-function,指定过渡的时序函数，即过渡数值的变化方式，可选值：
  1. ease，默认值，慢速开始，先加速，后减速
  2. linear,匀速运动
  3. ease-in,加速运动
  4. ease-out,减速运动
  5. ease-in-out,先加速，后减速，与ease稍有不同
  6. cubic-bezier(.25,.1,.25,1),贝塞尔曲线，来指定变化曲线，括号内容由工具生成(https://cubic-bezier.com)，数字分别是官网图上两个点的坐标
  7. steps()，分部执行过渡效果，例：step(2,start/end),start,end表示在时间开始或者结束时开始过渡
• transition-delay,过渡的延迟，等待相应时间后再执行过渡,例：transiton:2s
• 简写属性，transition,同时执行过渡相关的属性，其中延迟在持续时间后面，其他无顺序要求，语法：transition:变化的内容 变化的持续时间 …
• 作用，可以完成雪碧图的移动，本节对应练习项目中的米兔动画

动画 animation

• 动画和过渡类似，实现动态效果；过渡是某些属性发生变化时触发，动画是自动触发
• 设置动画效果必须先要设置关键帧，关键帧可以设置关键时间的帧的样式
• 关键帧语法：@keyframes identifier{ from{} to{} }，identifier自己起一个名字，相当于类名，给元素加动画时会用到
• 例子：

@keyframes test {
	/* from表示动画开始位置，也可以使用0%  */
	from{
		margin-left: 0;
	}
	/* 指定25%的动画效果*/
	25%,50%{
		margin-right: 700px;
		animation-timing-function: ease-in;
	}
	/* to表示动画开始位置，也可以使用100%  */
	to{
		margin-right: 700px;
	}
}

• 然后使用动画的属性设置动画样式，包括以下的：
  1. animation-name : identifier;指定对当前元素生效的关键帧名字
  2. animation-duration: 2s 动画的执行时间
  3. animation-timing-function:linear
  4. animation-delay:2s 动画的延迟时间
  5. animation-iteration-count:动画执行的次数。可选值:次数：整数;infinite：表示无限
  6. animation-direction:指定动画运行方向，可选值：
     • normal 默认值 从from向to运行，每次都这样
     • reverse 从 to 往 from
     • alternate 从from向to运行 重复时反向
     • alternate-reverse 从nto向from运行 重复时反向
  7. animation-paly-state:设置动画的执行状态。可选值：running 默认值，动画执行；pasued 动画暂停。
  8. animation-fill-mode:指定动画的填充模式，可选值：
     • none 默认值，执行完毕回到原来位置
     • forwards 动画执行完毕元素会停在动画结束的位置
     • backwards 动画延时等待时，元素就会处开始位置
     • both，兼有forwards和backwards
  9. 最后还有简写属性animation，可以设置上述的所有属性
• 可以用来做一些动画效果，更美观，本节对应练习项目中的 米兔动画 和 钟表 的制作

变形 transform

• 变形是指通过CSS来改变元素的形状或位置，transform 用来设置元素的变形效果
• 变形不会影响到页面布局
• 所有改变位置时,transform比position更好用
• 平移：属性值如下
  1. translateX() 沿着x轴方向平移
  2. translateY() 沿着y轴方向平移
  3. translateZ() 沿着z轴方向平移
     例：transform:translateX(100px)
• transform: translateX(50%),百分比相对自身计算，这就引申出一个居中方式
  1. 以前的居中方式，dianplay:table;vertical-align:center;text-align:center;
  2. 以前的适用于长宽已知：top:0;bottom:0;left:0;right:0;margin:auto
  3. 新的适用长宽不知的：left:50%; top:50%; transform:translateX(50%) translateY(50%)
• translateZ(100px),改变Z轴位置，近大远小，但浏览器默认不支持透视所以看不出来，看到效果需要设置默认情况下网页的视距，如将当前视距设为800px可以这样写， html{perspective(800px)}，然后translateZ就起作用了
• 旋转：使元素沿着 x y z选转指定的角度
  1. 属性值：rotateX() rotateY() rotateZ()
  2. 例：transform:rotateY(180deg) translateZ(100px)，Z,Y的顺序不同则变化不一样，设置了视距后效果更佳
  3. 可以使用rotateZ(180deg)来水平反转图片,使用backface-visibility:hidden/visibile来设置图片背部是否可见
• 缩放：scale，对元素进行缩放，本质是拉长轴
  1. 属性值：scaleX() 水平方向缩放；scaleY() 垂直方向缩放 ；scaleZ() z方向缩放,使用很少 ；scale() 双方向缩放
  2. 例：transform:scaleX(2);X轴放大两倍,可以用于图片放大效果
• 变形原点 ：transform-origin，可以改变缩放原点
  1. 默认center,
  2. 例：transform-origin:20px 20px
• 联合动画和变形，可以做出不断旋转的图片正方体，本节对应的项目是 图片立方体