css3高级动画基础

transform 可以实现元素的形状、角度、位置等的变化。
值：
rotate(); 以x/y/z为轴进行旋转，默认为z
rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle) x, y, z —>

scale(); 以x/y为轴进行缩放
scale(x, y) 接受两个值，如果第二参数未提供，则第二个参数使用第一个参数的值
scalex(),scaley() 值是数字表示倍数，不加任何单位
scalez()
scale3d()  scale3d(sx,sy,sz)

skew(); 对元素进行倾斜扭曲
skew(x, y);接受两个值，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx(), skewy()

translate(); 可以移动距离,相对于自身位置。
translate(x, [y])
translatex(),translatey(),translatez(),translate3d(x, y, z)

transform-origin 变换原点

任何一个元素都有一个中心点，
默认情况下，其中心点是居于元素x轴和y轴的50%处

取值如下

transition 过渡动画

transition 属性是css3的一个复合属性，主要包括一下几个子属性

属性	介绍
transition-property	指定过渡或动态模拟的css属性
transition-duration	指定过渡所需要的时间
transition-timing-function	指定过渡函数
transition-delay	指定开始出现的延迟时间

transition 速录函数可以选择的值

属性	介绍
linear	规定相同速度开始至结束的过度结果（等于cubic-bezier()0,0,1,1）
ease	规定慢速开始。然后变快。然后变慢速结束的过度结果（等于cubic-bezier()0.25,0.1,0.25,1）
ease-in	规定以慢速开始的过度结果（等于cubic-bezier()0,0,1,1）
easy-out	规定以慢速结束的过度效果
ease-in-out	规定以慢速开始和结束的
cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

贝塞尔曲线
在animation和transition两个属性中，cubic-bezier是控制变化的速度曲线，下面我们来了解下什么是cubic-bezier。

cubic-bezier称为三次贝塞尔曲线，主要是生成速度曲线的函数，规定是cubic-bezier(<x1>,<y1>,<x2>,<y2>)

https://blog.csdn.net/wjnf012/article/details/78795573

animation 动画铺垫

动画关键帧 @keyframes

animation 动画会按照keyframes 关键帧里面指定的帧状态而过渡执行。
0% - 100% 代表动画的时间过渡

@keyframes demoMove{
    0%{ background-color:red;}
    10%{ background-color:green;}
    20%{ background-color:white;}
    50%{ width:200px;}
    100%{ height:200px;}
}

帧频里面如果只有 0% 和 100%两个关键帧，那么可以用 from to 代替

animation 动画

animation 属性为css3的复合属性，主要包括以下子属性

属性	介绍	值
animation-name	此属性为执行动画的 keyframe 名
animation-duration	此属性为动画执行的时间
animation-timing-function	指定过渡函数速率
animation-delay	执行延迟时间
animation-direction	normal/reverse/alternate/alternate-reverse;
animation-iteration-count	infinite/number;
animation-fill-mode	forwards/backwards/both/none;
animation-iteration-count	属性主要用来定义动画的播放次数。	n 播放次数、 infinite 无限次
animation-direction	属性主要用来设置动画播放方向	normal 默认值。动画按正常播放、reverse 动画反向播放。、alternate、动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。、alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
animation-play-state	属性主要用来控制元素动画的播放状态。	running 播放、paused 暂停
animation-fill-mode	属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值	none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处、forwards:表示动画在结束后继续应用最后的关键帧的位置、backwards: 会在向元素应用动画样式时迅速应用动画的初始帧（结合延迟1s来看）、both:元素动画同时具有forwards和backwards效果

columns 多列布局

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。

语法：

columns: [column-width] [column-count];

属性	介绍
column-width	指每一列的宽度 根据容器宽度自适应 （最小宽度）
column-count	指规定的列数 唯一精准的是列数
column-gap	设置列与列之间的宽度，直接用数值表示即可(eg:10px)
column-gap	主要用来设置列与列之间的间距 如果没有显示设置column-gap值时，其值大小会根据浏览器默认的font-size来定

但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

属性	介绍
column-rule-width	宽度

类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”。
column-rule-width属性接受任意浮点数，但不接收负值。
但也像border-width属性一样，可以使用关键词：medium、thick和thin。

属性	介绍
column-rule-style	样式

类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。
column-rule-style属性值与border-style属值相同，
包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
column-rule-color: 颜色 ; 类似于border-color属性

column-span: 1/all
设置多列布局元素内的子元素，可以跨列，类似标题效果。即一个新闻标题要横跨所有内容列。注：此属性要在子元素上设置。