首页手记 CSS3中transition、transform傻傻...

CSS3中transition、transform傻傻分不清楚

标签：

Html5 CSS3

前言

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

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

下面详细介绍。

animation（动画）

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

name（需要绑定到选择器的 keyframe 名称）
duration（完成动画所花费的时间，以秒或毫秒计）
function（动画的速度曲线）
delay（动画开始之前的延迟）
count（动画应该播放的次数）
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;

property（设置过渡效果的 CSS 属性的名称）
duration（完成过渡效果需要多少秒或毫秒）
function（速度效果的速度曲线）
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;
functions提供多种方法，如：skewX(angle)沿着 X 轴的 2D 倾斜转换，translate3d(x,y,z)3D 转换，rotate(angle)2D 旋转，在参数中规定角度等等

/**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*/
<ul>
    <li><a href="#">Javan的博客</a></li>
    <li><a href="#">今日头条</a></li>
    <li><a href="#">慕课网</a></li>
    <li><a href="#">开源中国</a></li>
</ul>