CSS Learning Note: transition

CSS3 's transition allows the CSS property values to smoothly transition within a certain time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner.

1, Transition property value.

Grammar:

1   Transition: [< ' transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' > [, [< ' Transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' >]]*

The transition consists of four attribute values: Transition-property (the CSS property that performs the transformation), Transition-duration (transition duration), Transition-timing-function (transformation rate change) transition-delay (transform delay time).

Transition-property: There are none, all, and specific CSS properties, such as numeric attributes such as width/height/top/left/right, color values, and so on.

Transition-duration: Default is 0, users can set their own, such as 0.5s.

Transition-timing-function: There are mainly ease (gradual slow), linear (constant speed), ease-in (acceleration), ease-out (deceleration), ease-in-out (acceleration and deceleration), Cubic-bezier.

Transition-delay: Animation transition delay time, user self-setting, default is 0.

2. Simple animated Demo

(1) Realize the transition animation of the module at right angle after hovering the mouse.

1 . IMG{2 width:200px;;3 Height:200px;4 Border:10px Solid #fff;5 -webkit-border-radius:15px;6 Border-radius:15px;7 Overflow:Hidden;8 float: Left;9 Margin-left:20px;Ten} One . Img:hover{ A cursor:Pointer; -} - . Border{ the -webkit-transition:All 1s ease; - -moz-transition:All 1s ease; - -ms-transtion:All 1s ease; - -o-transition:All 1s ease; + transition:All 1s ease; -} + . Border:hover{ A Border:10px Solid #fff; at Border-radius:50%; - -webkit-box-shadow:0 0 40px Rgba (255,255,255,.6), inset 0 0 40px rgba (255,255,255,1); -} -  - <div class= "border img" > -  in </div>

(2) realize the mouse hover, the image inside the div enlarges the effect.

1 . Zoom img{2 width:200px;3 Height:200px;4 -webkit-transition:All 2s ease;5 -moz-transition:All 2s ease;6 -ms-transition:All 2s ease;7 -o-transition:All 2s ease;8 transition:All 2s ease;9}Ten            One . Zoom Img:hover{ A width:300px; - Height:300px; -} the . Zoom:hover{ - -webkit-box-shadow:0 0 40px Rgba (255,255,255,.6), inset 0 0 40px rgba (255,255,255,1); - -moz-box-shadow:0 0 40px Rgba (255,255,255,.6), inset 0 0 40px rgba (255,255,255,1); - Box-shadow:0 0 40px Rgba (255,255,255,.6), inset 0 0 40px rgba (255,255,255,1); +} -  + <div class= "zoom img" > A  at </div>

(3), after hovering, the module rotates.

1 . Rotate{2 -webkit-transition:All 0.3s Ease;3 -moz-transition:All 0.3s Ease;4 -o-transition:All 0.3s Ease;5 -ms-transition:All 0.3s Ease;6 transition:All 0.3s Ease;7}8   9 . Rotate:hover{Ten -webkit-transform:Rotate (10deg); One -moz-transform:Rotate (10deg); A -ms-transform:Rotate (10deg); - -o-transform:Rotate (10deg); - Transform:Rotate (10deg); the -webkit-box-shadow:0 0 40px Rgba (255,255,255,.6), inset 0 0 40px rgba (255,255,255,1); - -moz-box-shadow:0 0 40px Rgba (255,255,255,.6), inset 0 0 40px rgba (255,255,255,1); - Box-shadow:0 0 40px Rgba (255,255,255,.6), inset 0 0 40px rgba (255,255,255,1); -} +  -  + <div class= "rotate img" > A  at </div>

CSS Learning Note: transition