:-: 过度
/* 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 -- zscale3d *//* scale(x,y,z) */transform: scale(.5);/* rotate 旋转(复合值)rotaterotateXrotateYrotateZrotate3d */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 -- xskewY -- 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
