一、CSS3 过渡
transition-property
规定过渡效果的 CSS 属性名
-webkit-transition-property: none / all / property;
-moz-transition-property: none / all / property;
-ms-transition-property: none / all / property;
-o-transition-property: none / all / property;
transition-property: none / all / property;
/*参数说明
- none
- all，默认值
- property(CSS属性名) 例如color、opacity...*/
transition-duration
规定完成过渡效果需要多少时间
transition-duration: time;
/*参数说明
- 规定完成过渡效果需要花费的时间（以秒或毫秒计）
- 默认值是 0*/
transition-timing-function
规定速度效果的速度曲线
transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out
step-start / step-end / steps(<integer>, [ start / end ])
cubic-bezier(<number>, <number>, <number>, <number>);
/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) − ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果） − step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
第一个参数：必须为正整数，指定函数的步数
第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/
transition-delay
定义过渡效果何时开始
transition-delay: time;
/*参数说明
- 指定秒或毫秒数之前要等待切换效果开始
- 默认值是 0*/
transition复合写法
transition: property duration timing-function delay;
实际应用
div
{
width:100px;
height:75px;
background:#0b2632;
transition-property:width;
transition-duration:1s;
transition-timing-function:ease-in-out;
transition-delay:0.5s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-delay:0.5s;
} div:hover
{
width:200px;
}
二、CSS3 动画
Keyframes
关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
/*参数说明
animationname：必写项，定义animation的名称
keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%)
css-styles：必写项，一个或多个合法的CSS样式属性
@keyframes animationname在style中单独写入
*/
animation-name
规定需要绑定到选择器的 keyframe 名称
animation-name: keyframename / none; /*参数说明
keyframename：指定要绑定到选择器的关键帧的名称；
none：指定有没有动画（可用于覆盖从级联的动画）
*/
animation-duration
规定完成动画所花费的时间，以秒或毫秒计
animation-duration: time; /*参数说明
time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果
*/
animation-timing-function
规定动画的速度曲线
animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out
step-start / step-end / steps(<integer>, [ start / end ])
cubic-bezier(<number>, <number>, <number>, <number>);
/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) − ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果） − step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
第一个参数：必须为正整数，指定函数的步数
第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/
animation-delay
规定在动画开始之前的延迟
animation-delay: time; /*参数说明
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
如果值为负，则动画马上开始，但会跳过相应的时间进入动画
*/
animation-iteration-count
规定动画应该播放的次数
animation-iteration-count: infinite / <number>; /*参数说明
<number>为数字，其默认值为“1”；infinite为无限次数循环
*/
animation-direction
规定是否应该轮流反向播放动画
animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit; /*参数说明
normal：正常方向
reverse：反方向运行
alternate：先正后反，并持续交替运行（需依赖infinite）
alternate-reverse：先反后正，并持续交替运行（需依赖infinite）
*/
animation-fill-mode
规定当动画完成或当动画有延迟未开始播放时，要应用到元素的样式
animation-fill-mode: none / forwards / backwards / both / initial / inherit; /*参数说明
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
*/
animation-play-state
规定动画运行或暂停
animation-play-state: paused / running; /*参数说明
paused：指定暂停动画
running：默认值，指定正在运行的动画
*/
animation
复合写法
animation: name duration timing-function delay iteration-count direction fill-mode play-state; /*参数说明
默认写在前面的时间为duration
*/
will-change
增强页面渲染性能，提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>; /*参数说明
auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化
scroll-position：表示将要改变元素的滚动位置
contents：表示将要改变元素的内容
<custom-ident>：明确指定将要改变的属性与给定的名称
<animateable-feature>：可动画的一些特征值，比如left、top、margin等
*/ 兼容性：IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+
实际应用
div
{
width:100px;
height:100px;
background:black;
} div:hover
{
animation:myfirst 5s;
-o-animation:myfirst 5s; /* Opera */
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
} @keyframes myfirst
{
0% {background:black;}
25% {background:blue;}
50% {background:red;}
100% {background:white;}
} @-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
} @-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
} @-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}