> ## :-: [过度](http://css.doyoe.com/properties/transition/index.htm) ```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; ``` > ## :-: [关键帧 - 动图](http://css.doyoe.com/properties/animation/index.htm) ```css .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` > ## :-: [旋转、缩放、移动或倾斜](http://css.doyoe.com/properties/transform/index.htm) ```css /* 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`