css3动画

一、css3过渡动画

语法： transition:过渡属性 过渡时间 过渡延迟时间 过渡方式;

1.transition-property(过渡属性)

取值：

a) all 所有发生变化的css属性都添加过渡

eg: transition:all 1s;

b) ident 指定发生过渡的css属性列表

eg: transition: transform 3s,background 2s,border-radius 1s;

c) none 默认值，没有css属性发生过渡

2.transition-duration(过渡时间)

取值：

0 默认值，不发生过渡

time 按照指定的时间执行过渡动画，单位为s

3.transition-delay(过渡动画延迟执行时间)

取值：

0 不延迟

正值 按照指定的时间延迟执行动画

负值 设置时间前的动画将会被截断

4.transition-timing-function(过渡动画执行方式)

取值：

ease 默认值

linear 匀速运动(线性效果)

ease-in 加速运动(渐显效果)

ease-out 减速运动(渐隐效果)

ease-in-out 渐显渐隐效果(慢-快-慢)

二、animation动画

语法：animation:动画名称 动画执行时间 动画延迟执行时间 动画执行次数 动画执行方式 动画播放状态 动画运动方向 动画时间之外的状态;

♥ 在使用animation属性之前，先要定义动画关键帧，语法如下

@keyframes 动画名称{
0%{
属性:属性值;
…
}
20%{
属性:属性值;
…
}
…
100%{
属性:属性值;
}
}

@keyframes 动画名称{
from{
属性:属性值;
}
…
to{
属性:属性值;
}
}

注： @keyframes的兼容写法如下：

@-webkit-keyframes 动画名称{
…
}

1.animation-name(动画名称)

eg: animation:box_ani 2s;

注：animation中的动画名称要和@keyframes定义的动画名称一致

2.animation-duration(动画执行一次所需时间)

取值：

0 不执行动画

time 按照设置的时间执行动画，单位为s或者ms

3.animation-iteration-count(动画播放次数)

取值：

正整数 默认值为1，可以设置其他正整数

infinite 无限循环播放

4.animation-delay(动画延迟执行时间)

取值：

0 不延迟

正值 在动画开始执行之前按照指定的时间延迟

负值 设置时间前的动画将会被截断

5.animation-play-state(设置对象动画的状态)

取值：

running 默认值，运动状态

paused 动画暂停

eg: .box{animation:box_ani 6s infinite;}

 .box:hover{animation:box_ani 6s infinite paused;}

6.animation-timing-function(动画执行方式)

取值：

ease 默认值

linear

ease-in

ease-out

ease-in-out

step-start 马上转跳到动画的结束状态或者下一帧

step-end 保持动画开始时的状态，动画结束时，马上转跳到动画结束状态

steps(n,start|end) n为分几步完成动画

7.animation-direction(动画运动的方向)

取值：

normal 正常方向运动

reverse 与normal方向相反

alternate 正反方向交替运动，奇数次正方向，偶数次反方向

alternate-reverse 奇数次反方向，偶数次正方向

8.animation-fill-mode(设置动画时间之外的状态)

取值：

none 默认值，不设置动画时间之外的状态

forwards 保持动画结束时的状态

backwards 保持动画开始时的状态

both 遵循forwards和backwards两种规则

三、transition和animation执行动画的区别

1.是否需要触发条件

transition动画执行需要触发条件，不能自动执行

animation动画在页面加载完成后可以自动执行

2.播放次数

transition动画触发一次执行一次，再次执行需要再次触发

animation动画可以指定执行次数，或者无限循环播放

3.是否可以设置中间状态

transition动画只有开始和结束两个状态，不能设置中间状态

animation动画可以像flash一样设置中间的关键帧

扩展：倒影

语法：-webkit-box-reflect:镜像位置 偏移量 渐变;

注：镜像位置可选属性值如下：

left 左 right 右 above 上 below 下

eg: -webkit-box-reflect:below 3px linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%);

四、使用css2中border属性实现三角效果

语法： 元素

{
	 width:0;
	 height:0;
	 border:5px solid transparent;
	 border-top-color:red;
}