旋转魔方-关键帧示例(@keyframes)

旋转-魔方事例之魔方运动

上一刊描述了显示“魔方”的原理打印“魔方”以及transform示例
这期描述怎样使之运动：
@keyframes 关键帧用例
用法： @keyframes 关键帧名{}
animation: name duration timing-function delay iteration-count direction fill-mode;
样式名: 关键帧名 时间(s/ms) 移动曲线-速度(平均-linear) 延迟(s/ms) 播放次数(默认1) 播放周期(不用理会) 动画不播放时样式(维持或者消失…);
示例：animation: run-1-1-1 5s linear forwards;
解释：某某样式使用animation样式，在5S内以平均速度执行run-1-3-2关键帧、结束后维持未状态。

/*  数字%表明在某某时间执行某某样式  */
/*  0%，40%   在前40%的时间段内某某（使用该关键帧的样式）在某某（transform：...）位置  */
@keyframes run-1-3-2{
    0%,40%{
        transform: rotateX(0deg) rotateY(0deg) translateX(-110px) translateY(110px) translateZ(0px);
    }60%,80%{
        transform: rotateX(0deg) rotateY(90deg) translateX(-110px) translateY(110px) translateZ(0px);
    }100%{
        transform: rotateX(90deg) rotateY(90deg) translateX(-110px) translateY(110px) translateZ(0px);
    }
}

.u-1-3-2{
    transform: translateX(-110px) translateY(-110px) translateZ(-110px);
    animation: run-1-1-1 5s linear forwards;
}

下一刊放成果：

成果链接