CSS动画｜JavaScript动画｜小程序动画

资源推荐：CSS动画的12个原则 Animation Principles for the Web

（1）CSS3 animation 动画

// 定义动画的关键帧
@keyframes xhf {
  from {
    transform:scale(0.5, 0.5);
    opacity:0.5;
  }
  to {
    transform:scale(1, 1);
    opacity:1;
  }
}

.box {
    animation: xhf 2s 1;    // 动画执行2秒、执行1次
}

参考：CSS animation

（2）CSS3 transition 动画

.box {
    width: 100px;
    height: 100px;
    background: red;
    /* 要执行过渡动画的属性列表 */
    transition-property: width, background;
    /* 过渡持续时间 */
    transition-duration: 2s;
    /* 动画时间函数 */
    transition-timing-function: ease-in;
}
.box:hover {
    width: 500px;
    background: green;
}

参考：CSS transition

（3）JavaScript 动画

.box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
}

var oBox = document.getElementById('box');
var start = null;
function step(timestamp) {
    if (!start) start = timestamp;
    var left = timestamp - start;
    oBox.style.left = left + 'px';
    if (left < 1000) {
        window.requestAnimationFrame(step);
    }
}
window.requestAnimationFrame(step);

参考：window​.request​Animation​Frame

（4）小程序 Animation 动画

参考：小程序 Animation 动画

---

END 2019-05-25