transform

transform 主要用于给元素做变换

• rotate
• scale
• skew 扭曲
• translate 移动
• matrix 矩阵变换

使用 transform 和 position：absolute 实现水平垂直居中

<h2 style="padding-top: 20px;">使用transition实现水平垂直居中</h2>
<div class="transform-box">
  <div class="middle-center">
    <p>水平垂直居中</p>
    <p>宽度和高度由子元素撑开</p>
  </div>
</div>

.transform-box {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #00f;
}
.middle-center {
  background-color: #f00;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}

transition

用来定义某个 css 属性或者多个 css 属性的变化的过渡效果

transition 和 transform 结合实现动画过渡

<h2>利用transition和transform结合实现动画过渡</h2>
<div class="boll1" id="boll1"></div>

.boll1 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #03a9f4;
  transform: translateY(0px);
  margin-bottom: 300px;
  transition: all cubic-bezier(0.42, 0, 0.58, 1) 2s 1s;
  cursor: pointer;
}
.boll1:hover {
  transform: translateY(200px);
}

animation

@keyframes 定义动画

区别

transform, transition 和 animation 的区别:

• transform 本身是没有过渡效果的,它只是对元素做大小,旋转,倾斜等各种变换,通过和 transition 或者 animation 相结合,可以让这一变换过程具有动画的效果,它通常只有一个到达态,中间态的过渡可以通过和 transition 或者 animation 相结合实现,也可以通过 js 设置定时器来实现.
• transition 一般是定义单个或多个 css 属性发生变化时的过渡动画,比如 width,opacity 等.当定义的 css 属性发生变化的时候才会执行过渡动画,animation 动画一旦定义,就会在页面加载完成后自动执行.
• transition 定义的动画触发一次执行一次,想要再次执行想要再次触发.animation 定义的动画可以指定播放次数或者无限循环播放.transition: 需要用户操作,执行次数固定.
• transition 定义的动画只有两个状态,开始态和结束态,animation 可以定义多个动画中间态,且可以控制多个复杂动画的有序执行.

参考

• https://juejin.cn/post/6844904016388816910 (opens new window)