CSS LESS 开发规范

5 变换与动画

[必须] 使用 transition 时应指定 transition-property。

示例：

/* good */
.box {
    transition: color 1s, border-color 1s;
}

/* bad */
.box {
    transition: all 1s;
}

[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。

解释：

见本文，在可能的情况下应选择这样四种变换：

• transform: translate(npx, npx);
• transform: scale(n);
• transform: rotate(ndeg);
• opacity: 0..1;

典型的，可以使用 translate 来代替 left 作为动画属性。

示例：

/* good */
.box {
    transition: transform 1s;
}
.box:hover {
    transform: translate(20px); /* move right for 20px */
}

/* bad */
.box {
    left: 0;
    transition: left 1s;
}
.box:hover {
    left: 20px; /* move right for 20px */
}

[必须] webkit animation中的属性缩写遵行统一代码风格中的约定

示例：

.demo1 {
    width: 50px;
    height: 50px;
    margin-left: 100px;
    background: blue;
    -webkit-animation-name:'animateName';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 10s;/*动画持续时间*/
    -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 2s;/*动画延迟时间*/
    -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: alternate;/*定义动画方式*/
  }

  /* 缩写格式 */
  .demo1 {
    width: 50px;
    height: 50px;
    margin-left: 100px;
    background: blue;
    -webkit-animation: 'animateName' 10s ease-in-out 2s 10 alternate;
  }

[建议] 定义animation-keyframes中的属性统一用数值

示例：

@-webkit-keyframes 'animateName' {
    0% {
        margin-left: 100px;
        background: green;
    }
    40% {
        margin-left: 150px;
        background: orange;
    }
    60% {
        margin-left: 75px;
        background: blue;
    }
    100% {
        margin-left: 100px;
        background: red;
    }
  }