CSS3 常用方法Transform,Transition,Animationy

Transform

　　

　　transform:rotate()：

　　含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

　　.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

 

　　transform:skew()：含义：倾斜；

　　.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

 

　　transform:scale()：

　　含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

　　.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

 

　　transform:translate()：

　　含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

　　.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

 

Transition

　　transition一个速记法：transition: <property> <duration> <animation type> <delay>

　　p {
  　　　　-webkit-transition: all .5s ease-in-out 1s;
 　　　　 -o-transition: all .5s ease-in-out 1s;
 　　　　 -moz-transition: all .5s ease-in-out 1s;
　　　　  transition: all .5s ease-in-out 1s;
　　}

Animationy

　　

.flash{
    -webkit-animation-name:flash;
    -webkit-animation-duration:1.5s;
    -moz-animation-name:flash;
    -moz-animation-duration:1.5s;
    -o-animation-name:flash;
    -o-animation-duration:1.5s;
    -ms-animation-name:flash;
    -ms-animation-duration:1.5s;
    animation-name:flash;
    animation-duration:1.5s;
    }
    
@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}    
    25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}    
    25%, 75% {opacity: 0;}
}