持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情。

animation 动画

animation-name: 动画名词;
animation-duration: 过度时间0ms;
animation-timing-function: 速率;
animation-direction: 方向;
animation-iteration-count: 循环次数;
animation-fill-mode: 填充模式;
animation-delay: 延迟时间;
animation：名称  执行时间  延迟时间  填充模式;

可以通过 animation 做逐帧动画，在移动端，css3 animation 兼容性良好，相对于js ，CSS3逐帧动画使用简单且高效

animation animation：动画名称 持续时间(前两个是顺序固定的必选项) 执行次数 是否反向(normal正常 alternate反向) 运动曲线 延迟执行 (infinite表示无限次) 结束状态：forwards，保持结束后状态(默认) backwards，动画结束后回到最初的状态 steps() 分步

transition动画：

transition动画：
transition-property：设置过渡效果的CSS属性的名称
transition-duration：规定完成过渡效果需要时间
transition-timing-function：规定速度效果的速度曲线
transition-delay：定义过渡效果何时开始

transform动画：

transform动画：
translate(x, y)：定义2D转换        rotate(angle)：定义旋转
translate3d(x, y, z)：定义3D转换
scale(x [,y])：定义2D缩放      skew(x, y)：定义2D倾斜变换
scale3d(x, y, z)：定义3d缩放        none：无变换
transform:translate(x, y);
transform:rotate(45deg);    向右旋转45度
transform:scale(n);            缩放n倍
transform:skew(-20deg, 0);        x轴倾斜20

transfrom-style 值：float 表示所有子元素在2D平面呈现； preserve-3d 表示所有子元素在3D空间呈现

渐变

background-image 渐变
border-color: transparent(指定边框的颜色是透明的，默认) inherit(指定边框的颜色，应该从父元素继承)
线性渐变 background-image：linear-gradient(direction， color-stop1，color-stop2，...); 默认从上向下渐变(从左向右：to right 对角线：to bottom right 可以使用多个色标)
使用角度 background-image：linear-gradient(angle, color-stop1, color-stop2); 角度指定水平线和渐变线之间的角度
使用透明度 使用rgba() 函数定义坐标，rgba最后一个参数定义颜色透明度，0表示全透明，1表示不透明
重复线性渐变 repeating- linear-gradient()
径向渐变 由其中心定义 background-image：radial-gradient(shape size at position， start-color，...，last-color); 默认shape 是椭圆形，size 为最远角，position 为中心）