前言

对于刚学css时的我，经常搞不清这几个属性，由于也不经常用，所以每次再使用的时候就需要重新百度查阅这些属性是干嘛的，所以在这里进行了归纳。

属性	描述
animation（动画）	设置动画属性，，可以用来指定一组或多组动画，每组之间用逗号相隔。
transition（过渡）	设置元素的过渡样式
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画没有什么关系
translate（移动）	translate是transform的一个属性值，即移动。

HTML5中的translate是作为规定是否应该翻译元素内容

<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>

animation

这个属性在官方的介绍上animation是transition的扩展。

属性	描述
@keyframes	规定动画模式
animation	设置所有动画属性的简写属性
animation-delay	规定动画开始的延迟
animation-direction	规定动画是像前播放，向后播放还是交替播放
animation-duration	规定动画完成一个周期应花费的时间
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后、或者两者同时）
animation-iteration-count	规定动画应播放的次数
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

属性简写：animation: name(名称) duration（周期时间） timing-function（速度曲线） delay（延迟时间） iteration-count（动画播放次数） direction（播放顺序） fill-mode（不播放时的样式） play-state（动画是运行还是暂停）;

练习：

.item {
  color: white;
  float: left;
  margin-right: 2%;
}

.content {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: rgb(162, 0, 255);
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;
  
          animation:yao 4s linear 0s infinite alternate ;
}

        @keyframes yao { from { margin-left: -20%; } to { margin-left: 100%; }  }

   
    <div class="content">
        <div class="item">
         瑶
        </div>
        <div class="cylon_eye"></div>
      </div>

transition

过渡，字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hover、:focus、:checked、媒体查询或者JavaScript。 下面是关于这些属性的整理：

属性	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

属性简写：transition: property duration timing-function delay;

练习：

  .test{
    height: 100px;
    width: 100px;
    font-size: 20px;
    background-color: pink;
    //过渡时间为3秒
    transition-duration: 3s;
    //所有属性都会 获得css效果
    transition-property: all;
    //慢速开始的过渡效果
    transition-timing-function: ease-in;
    //两秒后开始过渡
    transition-delay: 2s;
}    
.test:hover{
    width: 500px;
    font-size: 80px;

}

<div class="test"></div>

transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

属性	含义
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义2D转换
translate3d(x,y,z)	定义3D转换
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值
scale(x,y)	定义2D缩放转换
scale3d(x,y,z)	定义3D缩放转换
scaleX(x)	通过设置X轴的值来定义缩放转换
scaleY(y)	通过设置Y轴的值来定义缩放转换
scaleZ(z)	通过设置Z轴的值来定义缩放转换
rotate(angle)	定义2D旋转，在参数中规定角度
rotate3d(x,y,z,angle)	定义3D旋转
rotateX(angle)	定义沿着X轴的3D旋转
rotateY(angle)	定义沿着Y轴的3D旋转
rotateZ(angle)	定义沿着Z轴的3D旋转
skew(x-angle,y-angle)	定义沿着X轴和Y轴的2D倾斜转换
skewX(angle)	定义沿着X轴的3D倾斜转换
skewY(angle)	定义沿着Y轴的2D倾斜转换
perspective(n)	为3D转换元素定义透视视图

rotateX(a)函数功能等同于rotate3d(1,0,0,a)

练习

ul{
    position:relative;
    height:300px;
    width:300px;
    list-style:none;
    margin:100px auto;
    transform-style:preserve-3d;
    /* 名称，动画需要4秒来完成，动画已低速开始低速结束，动画延迟间隔时间为0，动画播放没有限制  */
    animation:yao 4s ease-in-out 0s infinite;
  }
  li{
    position:absolute;
    height:300px;
    width:300px;
    font-size:5em;
    text-align:center;
    line-height:300px;
   
  }
  li:nth-child(1){
    background-color: pink;
    transform: translateZ(150px); 
  }
  li:nth-child(2){
    background-color:yellow;
    transform: rotateY(90deg) translateZ(150px);
  }
  li:nth-child(3){
    background-color:orange;
    transform: rotateX(90deg) translateZ(150px);
  }
  li:nth-child(4){
    background-color:cornflowerblue;
    transform: rotateX(-90deg) translateZ(150px);
  }
  li:nth-child(5){
    background-color:rgb(85, 0, 255);
    transform: rotateY(-90deg) translateZ(150px);  
  }
  li:nth-child(6){
    background-color:purple;
    transform: rotateX(180deg) translateZ(150px);
  }
 
  @keyframes yao{
    
    100%{
      transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg) ;
      /* transform:rotate3d(1,1,1,360deg) */

    }
  }

<ul>
  <li>瑶</li>
  <li>Y</li>
  <li>A</li>
  <li>O</li>
  <li>嘿</li>
  <li>嘻</li>
</ul>