CSS基础之过渡，动画，变形，旋转，缩放

Posted 2021-07-12 开到荼蘼223's

文章目录

• 过渡
• 动画
• 变形
• 旋转
• 缩放

过渡

过渡 (transition)通过过渡可以指定一个属性发生变化时的的切换方式，通过过渡效果可以创建一些非常好的效果，提升用户的体验。

过渡的属性：

• transition-property: 指定要执行过渡的属性，多个属性间用逗号隔开，如果所有属性都需要过渡可以使用all，大部分属性都支持过渡。
  注意：过渡必须是一个有效数值像 auto不是有效数值

• transition-duration: 指定过渡效果的持续时间，时间单位 s和ms。

• transition-timing-function:过渡的时序函数
  是指定过渡的执行的方式
  默认值 ：
  ease 慢速开始 先加速后减速
  linear 匀速运动
  ease-in 加速运动
  ease-out 减速运动
  ease-in-out 先加速后减速
  cubic-bezier() 贝塞尔曲线，可以在https://cubic-bezier.com绘制需要的贝塞尔曲线
  steps()分步执行过渡效果

• transition-delay 过渡效果的延迟，等待一段时间后再执行过渡

注意：transition 可以同时设置过渡相关的所有属性，只有一个要求
如果要写延迟，第一个时间时持续时间，第二个是延迟。

动画

动画（animation），动画和过渡类似，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤。通过@keyframes 动画的名称{}设置动画执行的整体步骤。

 @keyframes test{
         from{
             margin-left: 0;
             background-color: orange;
         }
            /*  from表示动画的开始位置 也可以使用0% */
         to{
             margin-left: 700px;
             background-color: red;
         }
            /*  to表示动画结束位置 也可以使用100% */
     }

动画的属性：

• animation-name: 要对当前元素生效的关键帧的名字

animation-name: test;

• animation-duration: 动画的执行时间

animation-duration: 1s;

• animation-delay: 动画的延迟时间

animation-delay: 2s;

• animation-timing-function: 动画的时序函数
  与过渡的时序函数类似

 animation-timing-function: ease-in-out;

• animation-iteration-count: 动画执行的次数 infinite 无限执行
• animation-direction: 动画执行的方向
  默认值
  normal 从from到to执行
  reverse 从to到from执行
  alternate 从from到to运行重复执行时反向执行
  alternate-reverse 从to向from运行 重复执行时反向执行
• animation-play-state: 设置动画的执行状态
  可选值：
  running 默认值 动画执行
  paused 动画暂停

animation-play-state: paused;

animation-fill-mode: 动画的填充模式

可选值：
none 默认值 动画执行完毕 元素回到初始位置
forwards 动画执行完毕 元素会停止在动画结束位置
backwords 动画延时等待时 元素就会处于开始位置
both 结合了forwards和backwards

变形

变形就是指通过css来改变元素的形状和位置，变形不会影响到页面的布局，可以通过transform来设置元素的变形效果。

平移
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
平移元素,百分比是相对于自身计算的

             transform: translateY(100px);
             transform: translateX(50%);

注意：多个变形用空格隔开，下面再定义transformX会让上方的transformY失效，可以利用以下方式进行元素居中

 transform: translateX(-50%) translateY(-50%);

Z轴平移
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼的距离，距离越大，元素离我们人越近。

z轴平移属于立体效果，默认情况下网页是不支持透视的，如果需要看见效果必须要设置网页的视距。

html{
            /* 设置当前网页的视距为800px 人眼距离网页的距离 */
            perspective: 800px;
        }

            transform: translateZ(800px);

旋转

通过旋转可以使元素沿着x y 或 z旋转指定的角度
rotateX() 元素沿着X轴旋转
rotateY() 元素沿着Y轴旋转
rotateZ() 元素沿着Z轴旋转
可与选用的单位由 deg（°） turn（圈）

            transform: rotateY(180deg);

缩放

通过scale（）可以对元素进行缩放

• scaleY()垂直方向的缩放
• scaleX()水平方向缩放
• scale()双方向的缩放

css中可以通过transform-origin设置变形的原点
默认值是center

transform-origin: 0px 0px;

同理我们可以自己更改想要的变形原点