动画（定义动画，调用动画，动画属性，动画简写属性，速度曲线调节），3D转换（三维坐标系，3D移动translate3d，透视perspective，3D旋转rotate3d），3D呈现，浏览器私有前缀

最新推荐文章于 2024-06-12 22:47:22 发布

原创

最新推荐文章于 2024-06-12 22:47:22 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

本文介绍了CSS3动画的基础概念，如何定义关键帧动画，包括动画名称、持续时间、速度曲线、延迟和播放次数。同时涵盖了3D转换的技巧，如translate3D和透视，以及3D旋转和呈现方式。适合初学者理解动画的高级用法。

动画

动画是CSS3中最具有颠覆的特征之一，可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相对于过渡，动画可以实现多变化，更多控制，连续自动播放等效果

制作动画分为两步：

定义动画

/* 定义动画 */
@keyframes move {
    /* 开始状态 */
    0% {
        transform: translate(0);
    }
    /* 结束状态 */
    100% {
        transform: translate(1000px);
    }
}

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列

在@Keyframes中规定某项CSS样式就能创建由当前样式逐渐改为新样式的动画效果

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

调用动画

div {
    width: 200px;
    height: 200px;
    background-color: #f0f;
    /* 调用动画 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 2s;
}