本文共 2120 字，大约阅读时间需要 7 分钟。

CSS3中transition、transform分不清楚？

前言

css属性很多，无论是字母的拼写还是字面上的意思，很多人都容易混淆，包括我在内，也时不时需要去看看到底是咋回事，是不是也混淆过你～

属性含义animation（动画）用于设置动画属性，他是一个简写的属性，包含6个属性transition（过渡）用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同transform（变形）用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”translate（移动）translate只是transform的一个属性值，即移动。

下面详细介绍。

animation（动画）

语法：animation: name duration timing-function delay iteration-count direction;

1. name（需要绑定到选择器的 keyframe 名称）
2. duration（完成动画所花费的时间，以秒或毫秒计）
3. function（动画的速度曲线）
4. delay（动画开始之前的延迟）
5. count（动画应该播放的次数）
6. direction（是否应该轮流反向播放动画）

div {  width: 100px;  height: 100px;  background: #1199ff;  position: relative;  animation: mymove 5s infinite;  -webkit-animation: mymove 5s infinite;}@keyframes mymove {  from {      left: 0px;  }  to {      left: 200px;  }}@-webkit-keyframes mymove {  from {      left: 0px;  }  to {      left: 200px;  }}

transition（过渡）

语法：transition: property duration timing-function delay;

1. property（设置过渡效果的 CSS 属性的名称）
2. duration（完成过渡效果需要多少秒或毫秒）
3. function（速度效果的速度曲线）
4. delay（过渡效果何时开始）

div {  width: 100px;  height: 100px;  background: #ee1166;  transition: width 2s;  -moz-transition: width 2s;  /* Firefox 4 */  -webkit-transition: width 2s;  /* Safari and Chrome */  -o-transition: width 2s;  /* Opera */}div:hover {  width: 300px;}

transform（变形）

语法：transform: none|transform-functions;

/**css*/ul {  margin: 20px 0 0 20px;  padding: 0;  list-style: none;}li {  float: left;  width: 100px;  text-align: center;  height: 30px;  line-height: 30px;  margin-right: 4px;  background: #ee1166;  -webkit-transform: skewX(30deg);}a {  text-decoration: none;  -webkit-transform: skewX(-30deg);  display: block;  color: #fff;}li:hover{  background: #008cf4;}/**html*/
   
    
    
Javan的博客
    
    
今日头条
    
    
慕课网
    
    
开源中国
   

translate（移动）

translate其实是 transform的一种属性值，进去2D或者3D移动

1. translate(x,y) 2D平移，x/y分别是x坐标平移多少像素，y坐标平移多少像素
2. translate3d(x,y,z) 3D平移，和2D一样

获取对应值

//获取 transform: translate();的属性值，也可以获取某元素在可视窗口的位置某元素.getBoundingClientRect().left/.top/.right/.bottom/.width./height

谢谢阅读！