【Css3动画】

Css3动画

Css3渐变

CSS3渐变的分类

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（radial-gradient）- 由它们的中心定义

CSS3 线性渐变

没有设置渐变方向时，默认从上到下渐变，可以设置至少两个颜色实现渐变

线性渐变方向: 8个方向单词 top bottom left right

`#grad { 
height: 200px; background-image: linear-gradient(to right, red , yellow);` 

Css3径向渐变

Css3过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

过渡：指定过渡的Css属性（必须） 持续时间（必须）速度变化 延迟时间

`transition:linear 2s;`

常见的过渡动画
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

Css3 2D转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸，转换的效果是让某个元素改变形状，大小和位置。

2D转换 transform

translate() 平移 X偏移量，Y偏移量 向右向下为正值，反方向为负值

`transform: translate(50px,100px); `

rotate() 旋转设置旋转度数 ** deg**代表度数单位 正值顺时针旋转，负值逆时针旋转

transform-origin: right top; 转换的起始点，可以设置旋转的中心；

`transform: rotate(30deg);` 

scale() 缩放 可以分别设置 X和Y 的缩放比例，不加单位

`transform: scale(2,3);`

skew() 倾斜 可分别设置 X 和 Y 的倾斜度数

`transform: skew(30deg,20deg); `

matrix()

它们都在transform属性中。

Css3 3D 转换

3D转换

Css3 动画 animation

@keyframes 规则 是创建动画

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

动画是使元素从一种样式逐渐变化为另一种样式的效果

定义动画，定义动画名字：myfirst

`@keyframes myfirst { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} `

animation 调用动画

animation-name: one; 动画名字

animation-duration: 5s; 持续时间

animation- timing function: linear; 速度

animation-delay: 2s; 延迟时间
animation- iteration-count: infinite; 播放次数infinite:重复播放
animation-direction:alternate; alternate逆向播放

animation-play-state:running; 播放状态：paused 暂停 running 正常播放

调用动画：

animation：

Css3多列布局

布局属性

属性	描述
column-count	指定列的数量
column-fill	指定如何填充列
column-gap	列与列之间的间距
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度，尽量不要与column-count同时使用
columns	设置 column-width 和 column-count 的简写