Css3-Common Methods: Transform, transition, and animationy

Transform

Transform: Rotate ():

Description: rotation. "deg" indicates "degree", for example, "10deg" indicates "10 degrees.

.Demo_transform1{-WebKit-Transform:Rotate(10deg);-Moz-Transform:Rotate(10deg)}

 

Transform: skew (): Meaning: skew;

.Demo_transform2{-WebKit-Transform:Skew(20deg);-Moz-Transform:Skew(20deg)}

 

Transform: Scale ():

Meaning: proportion; "1.5" indicates that the proportion is increased by 1.5. If you want to enlarge it by 2 times, you must write it as "2.0", and then scale it down to "-".

.Demo_transform3{-WebKit-Transform:Scale(1.5);-Moz-Transform:Scale(1.5)}

 

Transform: translate ():

Meaning: Change, displacement; the following shows a 120-pixel Shift to the right. If the shift is upward, you can change the value of "0" to the next value. If the shift to the left is negative "-".

.Demo_transform4{-WebKit-Transform:Translate(120px,0);-Moz-Transform:Translate(120px,0)}

 

Transition

Transition a stenographer: Transition: <property> <duration> <animation type> <delay>

 
P {-WebKit-transition: All. 5 s bytes-in-out 1 s;-o-transition: All. 5 s bytes-in-out 1 s;-moz-transition: All. 5 s bytes-in-out 1 s; transition: All. 5 s bytes-in-out 1 s ;}
 

 

Animationy

 . Flash { -WebKit-animation- Name: Flash; -WebKit-animation-duration: 1  . 5 S; -Moz-animation- Name: Flash; -Moz-animation-duration: 1  . 5 S; -O-animation- Name: Flash; -O-animation-duration: 1  . 5 S; -MS-animation-Name: Flash; -MS-animation-duration: 1  . 5 S; Animation - Name: Flash; Animation -Duration: 1  . 5 s ;}@ -WebKit- Keyframes flash {  0 %, 50 %, 100 % {Opacity: 1  ;}  25 %,75 % {Opacity: 0  ;}}@ -Moz- Keyframes flash {  0 %, 50 %, 100 % {Opacity: 1  ;}  25 %, 75 % {Opacity: 0  ;}}