css3动画

过渡(在要进行改变的对象上写

-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);

    }

}