"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

CSS Transitions and Animations

 

CSS Transitions and Animations bring life and interactivity to your web pages by allowing you to smoothly change property values over time. They enhance user experience by providing visual feedback and engaging effects without the need for JavaScript.

CSS Transitions

Transitions let you change CSS property values gradually, rather than instantly, when a state changes — like when a user hovers over a button.

Key Properties:

·         transition-property — Which CSS properties will animate (e.g., background-color, width).

·         transition-duration — How long the transition lasts (e.g., 0.3s).

·         transition-timing-function — The speed curve of the transition (e.g., ease, linear, ease-in-out).

·         transition-delay — Delay before the transition starts.

Example:

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
 
button:hover {
  background-color: green;
}

When the user hovers over the button, its background color smoothly changes from blue to green over 0.3 seconds.

CSS Animations

Animations allow more complex sequences of property changes, defined by keyframes that specify styles at various points in the animation timeline.

Key Properties:

·         @keyframes — Defines the stages of the animation.

·         animation-name — Specifies the name of the keyframes to apply.

·         animation-duration — How long one cycle of the animation lasts.

·         animation-iteration-count — How many times the animation runs (infinite for endless).

·         animation-timing-function — The speed curve of the animation.

·         animation-delay — Time before the animation starts.

·         animation-fill-mode — Controls how styles apply before and after animation.

Example:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
 
.box {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

This animation slides the .box element in from the left while fading it in.

Tips for Using Transitions and Animations

·         Use subtle animations to improve UX without overwhelming users.

·         Combine animations with JavaScript for interactive effects.

·         Be mindful of performance—avoid animating expensive properties like box-shadow or width too often.

·         Use will-change sparingly to optimize rendering for animated elements.

 

Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more