css3 移动动画-如何在css3中使用翻译和过渡

Translate和transition还是让我感觉他们很羊皮，很厉害，学不到东西。 虽然我比较抗拒理解她，但我看了文档不到半个小时，也大致了解了。 下面是一个例子，可以下载出来自己运行一下

  



  div {
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
  }
  div#translate {
    transition: all 2s;
    -ms-transition: all 2s;
    -webkit-transition: all 2s;
  }
  div#translate:hover{
    transform: translate(50px, 100px);
    -ms-transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
  }

hello, this is a div element
hello, this is another div element

点击此处查看演示演示[/css3/translate.html]

translate(a,b)：用官方的话来说，叫做2d转移。 虽然平面上的x轴和y轴是相连的，但是这么多名词是因为我们的知识太低了，不想让我们容易理解

a-垂直方向（左右方向），即x轴连接单位距离，例如10px，所以连接10px，正值连接右边，而负值连接到左侧。 b-水平方向（上下方向），即y轴连接b单位距离，例如50pxcss3 移动动画，那么就连接10px，正值向上连接，负值向下连接

起始点在左上角，如果在元素位置的开头设置了一个非原点，那就另当别论了，是在元素的基础上进行估计

原点(0,0)-----

过渡动画过渡

转换：属性持续时间定时功能延迟

属性-CSS属性

uration-动画执行时间css3 移动动画，如果为0则不执行动画

Timing-function动画执行方式默认ease

delay-动画延迟执行时间默认0

这四个是属性，别以为我写了其他属性，详细见(文档)[]

总结

关于如何在css3中使用translate和transition的文章到这里就结束了。 更多关于css3translatetransition的使用，请搜索之前的文章或者继续浏览下面的相关文章。 希望大家以后多多支持我！