CSS Important Property

CSS Transitions 

CSS transition allow us to set animation , change property value, timing, hover effect and smoothly change state on any element. This property is a shorthand for the following CSS properties:

Transition-delay:

This property used for set timing to start effect on element. If we set 1 sec then transition effect will be start after 1 sec.

Transition-duration:

This property really awesome because we can set specific time for effect run time.

Transition-property:

This property sets the css properties which transaction effect should be applied.

Transition-timing-function:

The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.

Media Queries:  

Media query use for make application responsive depend on devices screen . Media queries useful for keep content proper structure in different sizes of screen. As well as we can set up different style in different width. As a example if you want to set background-color will be blue in desktop screen and background color will be green in mobile screen then we should be used @ media query , This example code is

@media only screen and (max-width: 668px) {

  body {

background-color: blue;

  }

}

@media only screen and (min-width: 669px) {

  body {

background-color: green;

  }

}

CSS Web Safe Fonts

If you use random font in css style it will may be not effect all browser  some browser may miss this font . So there are some font that should be work all browser thats called css web safe font. Here is css web safe fonts list:

• Arial (sans-serif)

• Verdana (sans-serif)

• Helvetica (sans-serif)

• Tahoma (sans-serif)

• Trebuchet MS (sans-serif)

• Times New Roman (serif)

• Georgia (serif)

• Garamond (serif)

• Courier New (monospace)

• Brush Script MT (cursive)

CSS @keyframes Rule

The @keyframes rule in CSS is used to control the animation rule.A animation rule is created by css style. In animation duration content will be change in different angle in every time. This time can be set by css @keyframes. Example: 

@keyframes identifier {

  0% { top: 0; left: 0; }

  30% { top: 50px; }

  68%, 72% { left: 50px; }

  100% { top: 100px; left: 100%; }

}

The calc() Function :

The calc() function used for performs a calculation to used as the property value. 

It can be used anywhere such as  <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.