CSS动图效果

:-: 过度

            /* transition 过度动画
                作用属性 -- transition-property
                时间间隔 -- transition-duration
                动图效果 -- transition-timing-function
                等待延时 -- transition-delay */
            transition: all .5s linear .3s;
            /* cubic-bezier 贝塞尔曲线函数 */
            transition: all .5s cubic-bezier(0.6, -0.25, 0.75, 0.05) .3s;

:-: 关键帧 - 动图

        .demo {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            /* animation 播放关键帧动画 */
            animation: demo 5s;
            /* animation 播放关键帧动画 并行执行demo2 */
            animation: demo 5s, demo2 5s;
            /* animation 播放关键帧动画 (复合值)
                           none ----- 动图名称
                       duration ----- 耗时
                timing-function ----- 效果(贝塞尔曲线)
                          delay ----- 等待延迟(执行第一次的时候才会等待，并不是每一次都等待)
                iteration-count ----- 循环执行的次数(infinite无限次)
                      direction ----- 可以改变走关键帧的方式(倒序)
                      fill-mode ----- 设置保留最后一帧的状态、 */
            animation: demo 5s cubic-bezier(1, -0.32, 0.52, 0.96) 2s infinite alternate forwards;
        }
        
        /* @keyframes demo 关键帧容器(demo名字随便取) */
        @keyframes demo {
            0% {
                top: 0;
                left: 0;
            }
            30% {
                top: 400px;
                left: 200px;
                background-color: blue;
            }
            60% {
                top: 0;
                left: 800px;
                background-color: #ccc;
            }
            100% {
                top: 0;
                left: 0;
                background-color: red;
            }
        }

Demo - 打字效果：http://a-1.vip/demo/demo_c3/font.html
Demo - 跑马效果：http://a-1.vip/demo/demo_c3/horse.html

:-: 旋转、缩放、移动或倾斜

            /* transform 对元素进行旋转、缩放、移动或倾斜(复合值)
                定义和用法：属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
                    origin -- 设置或检索对象以某个原点进行转换
                     style -- 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。 */
            transform: rotate(45deg) scale(1.3, 1.3);

            /* 属性值：scale 缩放(复合值)
                1.伸缩的是此元素变化坐标轴的刻度 2.可以叠加操作
                scaleX -- 缩放x轴
                scaleY -- 缩放y轴
                scaleZ -- z
                scale3d  */
                /* scale(x,y,z) */
            transform: scale(.5);

            /* rotate 旋转(复合值)
                rotate
                rotateX
                rotateY
                rotateZ
                rotate3d */
            transform: rotate(-45deg);
            /* 改变旋转中心点，默认值：center 取值：0 5px 5% center */
            transform-origin: 0 0;

            /* rotate3d(x,y,z,angle) 设置一个自定义的轴进行旋转 */
            transform: rotate3d(1, 1, 0, 45deg);

            /* skew 倾斜(复合值)
                skew(x, y)
                skewX -- x
                skewY -- y */
            transform: skew(45deg, 0deg);

            /* 父级加 transform-style: preserve-3d; 子级将支持3d渲染
                    -- 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
                    -- 当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
                    -- 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
                    -- 对应的脚本特性为transformStyle。 */
            transform-style: preserve-3d;

            /* opacity: 1; */
            /* transform: translateZ(0); */
            /* gpu加速 标准方法 */
            will-change: transform;

Demo - 3D旋转图片墙：http://a-1.vip/demo/demo_c3/3d.html