Home       FORM       Transition       Animation      WBA      CONTACT


What is css transition ?


CSS transitions allows you to change property values smoothly, over a given duration.



How to Use CSS Transitions?


To create a transition effect, you must specify two things:
1.the CSS property you want to add an effect to
2.the duration of the effect

transition properties :


transition-delay
transition-duration
transition-property
transition-timing-function

CSS pseudo-classes


pseudo-classes are used to add styles to selectors, but only when those selectors meet certain conditions. A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed by a pseudo-class such as "hover", "focus", or "active"





Here are some examples of CSS transitions using pseudo classes like Hover, Active and Focus




1. Hover - Put mouse cursor on Them (Touch)


i) Naughty Circles



R E S E T..!



ii) A Flip Card




Hover, please!

Whoaaa!!!





iii) A Shape Transformation

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ratione qui voluptatum quod et quaerat dolorum odio consequuntur dolores! Ipsum commodi mollitia maiores expedita reiciendis ducimus qui unde! Odio molestias!





2. Active - Press and Hold mouse button


i)A Switch [ON/OFF]




OFF ON





ii) A Color Changing Star










iii) Transitioned BUTTONS




a) Transition + Cursor Grabblling --> Grab







b) Cursor Disabled --> Wait







c) Cursor Pointer --> Progress







3. Focus ( Use Tab Key )