解析transform,transition和animation的区别

1. transform

1.1 定义

transform主要用于给元素作变换,主要由如下几种变换,rotate(旋转),scale(缩放),skew(扭曲),translate(移动)和matrix(矩阵变换).

语法:

transform: none | transform-functions

none表示不作变换, transform-functions表示变化函数,能够使一个变换函数或者多个变换函数的组合.

.transform-multi:hover {
  transform: scale(1.2) rotate(30deg);
}
复制代码

transform-origin转换基点

transform-origin: x-axis y-axis z-axis;, transform-origin用来定义转换的基点,默认的转换基点是元素的中心点,下图是以右下角为基点作变换的效果图.

transform-style定义嵌套元素在三维空间呈现

transform-style: flat|preserve-3d;

• flat: 表示全部子元素在2D平面呈现
• preverse-3d: 表示全部子元素在3D空间中呈现

效果图:

1.2 使用场景

简单的罗列api的使用会让人感受枯燥和无心义,下面我就结合具体的使用场景来实践transform的一些转换函数.

1. 使用transition和position: absolute;结合实现水平垂直居中:

html:

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

css:

.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;
}
复制代码

效果图:

2. 定义放大,旋转,倾斜,矩阵变换等交互效果:

html:

<h2>scale, rotate, skew, martix</h2>
<div class="transform-box">
  <div class="white-container">
    <div class="gray-bg scale">
      <div class="blue-content"> 
      </div>
    </div>
    <p class="info-text">scale(2)</p>
  </div>
  <div class="white-container">
    <div class="gray-bg rotate">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">rotate(45deg)</p>
  </div>
  <div class="white-container">
    <div class="gray-bg skew">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">skew(45deg)</p>
  </div>
  
  <div class="white-container">
    <div class="gray-bg matrix">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">matrix(2, 2, 0, 2, 45, 0)</p>
  </div>
</div>
复制代码

css:

.transform-box {
  display: flex;
  text-align: center;
  
}
.white-container {
  width: 200px;
  flex: 0 0 200px;
  margin-right: 20px;
  background: #f1f1f1;
}
.gray-bg {
  width: 100px;
  height: 100px;
  margin: 15px auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.blue-content {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
}
.info-text {
  color: #555;
}
.scale:hover .blue-content {
  -webkit-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}
.rotate:hover .blue-content {
  -webkit-transform: rotate(45deg);
  transform: scale(45deg);
}
.skew:hover .blue-content {
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}
.matrix:hover .blue-content {
  -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  transform: matrix(2, 2, 0, 2, 45, 0);
}
复制代码

效果图:

值得一提的是若是有须要,咱们能够使用matrix做出很是复杂的矩阵变换,有兴趣的同窗能够研究一下：CSS3 Transform Matrix

3. 用js来动态改变transform的属性值实现动画的过渡效果:

咱们以小球下落的动效来作示例:

html:

<h2>Js操做元素的transform属性值实现小球下落动效</h2>
<button class="boll-btn" id="boll-btn">小球下落</button>
<div class="boll" id="boll"></div>
复制代码

css:

.boll-btn {
  width: 100px;
  height: 30px;
  line-height: 28px;
  border: none;
  border-radius: 5px;
  color: #555;
  margin-bottom: 10px;
}
.boll {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #03A9F4;
  transform: translateY(0px);
  margin-bottom: 300px;
}
复制代码

js:

const domBoll = document.getElementById('boll')
document.getElementById('boll-btn').onclick=function() {
  let distance = 0
  let timer = setInterval(() => {
 
  if(distance >= 300) {
     clearInterval(timer)
     }  domBoll.style.transform = 'translateY('+ distance++ +'px)'
  }, 30)
}
复制代码

效果图:

若是须要的话,能够使用translate3d,rotate3d等API将元素提高为合成层,开启硬件加速渲染,但开启硬件加速渲染以后,有些时候可能会致使浏览器频繁闪烁或抖动，能够尝试如下办法解决：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
复制代码

2. transition

2.1 定义

语法:

transition: property duration timing-function delay;

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

属性定义及使用说明:

值	描述
transition-property	指定CSS属性的name，transition效果: 大小,位置,扭曲等
transition-duration	规定完成过渡效果须要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

transition-property:

属性值:

• none: 没有属性得到过渡效果
• all: 全部属性的变化都得到过渡效果
• property: 特定属性变化得到过渡效果,如: width, height,opacity等.

transition-timing-function:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值:

• 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(n,n,n,n): 在 cubic-bezier 函数中定义本身的值。可能的值是 0 至 1 之间的数值

2.2 使用场景

1. 实现激活状态的过渡效果(宽度和透明度变化):

html:

<h2>transition: width&opacity</h2>
<p class="transition-p">菜单一</p>
复制代码

css:

.transition-p {
  width: 100px;
  height: 40px;
  opacity: 0.6;
  border-radius: 10px;
  background: #03A9F4;
  text-align: center;
  line-height: 40px;
  color: #fff;
  transition: all 0.5s ease-in;
}
.transition-p:hover {
  opacity: 1.0;
  width: 120px;
}
复制代码

效果图:

2. transition和transform结合实现动画过渡

html:

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

css:

.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) 2.0s 1.0s;
  cursor: pointer
}
.boll1:hover {
  transform: translateY(200px);
}
复制代码

效果图:

平常的菜单交互,鼠标移进放大,小球下落等交互均可以使用transition实现,transition通常只有两个状态,始态和终态.通常只有两个状态的单次动画交互使用transition.

3. animation

3.1 定义

animation动画的定义,先经过@(-webkit-)keyframes定义动画名称及动画的行为,而后再经过animation的相关属性定义动画的执行效果.

语法:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

用来定义多个中间态的一系列的动画过渡效果.

属性定义及使用说明:

值	描述
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	规动画指定须要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔
animation-iteration-count	定义动画的播放次数
animation-direction	指定是否应该轮流反向播放动画
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state	指定动画是否正在运行或已暂停
initial	设置属性为其默认值, 阅读关于 initial的介绍
inherit	从父元素继承属性, 阅读关于 initinherital的介绍

其中animation-name指向的是@keyframes定义的动画.

@keyframes:

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需, 定义动画的名称
keyframes-selector	必需, 定义动画的多个中间态 合法值: 0-100% from(和0%相同) to(和100%相同)
css-styles	必需的, 一个或多个合法的CSS样式属性

3.2 使用场景

1. 定义一个循环自动执行的过渡动画(还记得春晚的小彩旗吗?)

html:

<h2>定义一个循环自动执行的过渡动画</h2>
<div class="animation-container" >
  <div class="animation-infinite">
    循环自动执行的过渡动画
  </div>
</div>
复制代码

css:

.animation-container {
  position: relative;
  padding-bottom: 50px;
}
.animation-infinite {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 50px;
  padding: 10px;
  background: #03A9F4;
  color: #fff;
  animation: move-to-right 2.0s infinite;
}
/* 定义右移动画 */
@keyframes move-to-right {
  0% {
    opacity: 1.0;
    width: 100px;
    left: 0;
  }
  25% {
    opacity: 0.4;
    width: 120px;
    left: 40px;
  }
  50% {
    opacity: 0.6;
    width: 150px;
    left: 80px;
  } 
  75% {
    opacity: 0.8;
    width: 120px;
    left: 40px;
  }
  100% {
    opacity: 1;
    width: 100px;
    left: 0;
  }
}
复制代码

效果图:

2. 定义多个动画的串联执行

html:

<h2>animation定义多个动画的串联执行</h2>
<div class="animation-container" >
  <div class="animation-infinite1">
    多个动画的串联执行
  </div>
</div>
复制代码

css:

.animation-container {
  position: relative;
  padding-bottom: 150px;
}
.animation-infinite1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 50px;
  padding: 10px;
  background: #03A9F4;
  color: #fff;
  animation: to-right 2.0s ease-in,to-bottom 1.0s ease-in 2.0s,to-left 2.0s ease-in 3.0s,to-top 2.0s ease-in 5.0s;
  
}
@keyframes to-right {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: 200px;
  }
} 
@keyframes to-bottom {
  0% {
    top: 0;
    left: 200px;
  }
  100% {
    top: 100px;
    left: 200px;
  }
} 
@keyframes to-left {
  0% {
    top: 100px;
    left: 200px;
  }
  100% {
    top: 100px;
    left: 0;
  }
} 
@keyframes to-top {
  0% {
    top: 100px;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
} 
复制代码

效果图:

和transform同样,咱们能够将animation动画定义在一个class上,而后经过js操做给某个元素加上对应的类,从而触发动画的执行,咱们能够灵活的进行多个动画的切换,控制动画的执行次数等.

总结

transform, transition 和animation的区别:

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

ps: 对这篇文章中的使用场景部分,我仅写出来在我平时工做中会用到的一些场景,欢迎在评论区留言分享大家的一些动画使用场景,供你们学习~ 示例源代码地址

一块儿进步,愿咱们都能成为更好的本身~

往期回顾

• 为何单页面的seo不友好？如何解决这一问题？
• 打牢基础系列：JavaScript的变量和数据类型
• 精读源码系列: Vue中DOM的异步更新及Vue.nextTick()原理解析
• 精读源码系列: 前端路由Vue-Router
• 打牢基础系列: JavaScript的类继承
• postMessage可太有用了
• 在vue中使用SockJS实现webSocket通讯