# css3新属性 animation（动画） 、 多列布局column、border-radius、box-shadow

1、animation （动画）

属性

• 设置动画名称
  animation-name：change；

• 设置动画时间
  animation-duration：2s；

• 设置动画次数
  animation-iteration-count：3；
  其中有个属性为infinite意思为无限循环

• 设置动画延迟
  animation-delay：3s；

• 设置动画的方向与是否返程，值有：normal、reverse、alternate、alternate-reverse
  animation-direction：alternate；

• 速度
  animation-timing-function：linear；
  linear为匀速，还有ease-in

• 设置动画结束的时候应用最后一帧的属性值:forwards;设置动画在延迟中应用第一帧的属性值（backwards）；如果两个效果都需要，则使用（both）
  animation-fill-mode：both；

• 设置动画暂停（paused）与播放（running）
  animation-play-state：running；

  实例

<style>
    @keyframes anitname{
        0%{
            left:0;
        }
        50%{
            left:100px;
        }
        100%{
            left:0;
        }
    }
    div{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        animation: anitname 3s infinite;
    }
</style>

如何引入animate.css库

• 进入github中搜索库名下载
• 然后将库引入

<link rel="stylesheet" href="animate.css" >

• 在标签中直接应用

<p class="animated rubberBand">测试文字</p>

2.column 多列布局

• column-count 设置几列布局
  column-count：3；
• column-width：设置列宽
  column-width：5em；
• columns 符合形式优先使用较少列数的设置项
  column：2 20em；
• column-gap 设置列之间的间隙
  column-gap：3em；

考虑兼容性

-webkit-column-gap: 3em;谷歌兼容
-moz-column-gap: 3em;火狐兼容
-ms-column-gap: 3em;IE兼容

• 设置列之间的间隙样式

    column-rule-color：blue；
    column-rule-width：1px；
    column-rule-style：dashed；

• 符合样式

column-rule: 1px solid red;

• 指定元素跨越所有的列

column-span: all;

3.border-radius

• border-radius可以轻松的给元素设置圆角效果

border-radius: 50%;

• border-radius的值做多可以写8个值，分别代表：上左、上右、下右、下左 / 左上 右上 右下 左下

注意写8个值的时候，前4个值和后4个值之间要用 / 分隔
通常写4个值就够了，也可以写1个或者2个。

4.box-shadow 盒子阴影

• 盒子设置阴影

• 四个值：第一个：X轴的偏移：第二个：Y轴的偏移；第三个：阴影的模糊程度；第四个：颜色

box-shadow: 10px 10px 10px blue;

• inset可以设置内阴影

box-shadow: inset 10px 10px 10px blue;

• 阴影值可以写多个，直接写在一起，中间用逗号分隔

text-shadow: 10px 10px 10px red,0 0 20px blue;