过渡(在要进行改变的对象上写
-o-transition:all .3s ease-in-out ;
-ms-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
变化（旋转）
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
放大 修改scale(放大的值)
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
旋转放大 修改rotate(旋转度数) scale(放大值)
ransform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
上下左右移动 修改translate(x轴,y轴)
transform:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0,-10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);}
全背景
background-size:cover
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover
变灰色
.gray { ????-webkit-filter: grayscale(100%); ???-moz-filter: grayscale(100%); ???-ms-filter: grayscale(100%); ???-o-filter: grayscale(100%); ???????filter: grayscale(100%); ???filter: gray;}- 在线测试工具
阴影
box-shadow: 0px 0px 9px 1px #302e2e;
文字阴影
text-shadow: 0px 5px 5px rgba(0, 0, 0, .6);
————————————————————————————————————————————————————————————————————————————————————————
自定动画
必有属性
animation-name //指定动画名称animation-duration //指定动画持续时间
其它属性
animation-timing-function ??????????????//缓动效果animation-iteration-count ??????????????//循环播放的次数animation-delay ????????????????????????//延时执行时间animation-direction ????????????????????//动画运动的方向animation-fill-mode //设置对象动画时间之外的状态animation-play-state //对象动画的状态
缩写
animation: [animation-name] ???????????[animation-duration] ??????????[animation-timing-function] ???????????[animation-delay] ???????????[animation-iteration-count] ???????????[animation-direction] ??????????[animation-fill-mode];.recruit-l.on{
animation: slLeft 1s;
-moz-animation: slLeft 1s;
}
.recruit-r.on{
display: block;
animation: slright 1s;
-moz-animation: slright 1s;
}
动画方案设置：@keyframes 动画名{}
@keyframes slLeft{
0% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slright{
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
-o-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
100%{
transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
}
css3动画
原文地址：http://www.cnblogs.com/foxbat19/p/7872340.html