CSS Transition and Animation Properties

CSS animations and transitions are powerful tools that allow web developers to create engaging and interactive visual effects on their websites. They help enhance user experience and bring life to static elements on the page. Let's dive into the details of CSS animations and transitions.

CSS Transition:

CSS transitions allow smooth changes between different property values over a specified duration. They are triggered when a property changes its value, and you can define the transition effect to make the change more visually appealing. The syntax for defining a transition is as follows: 

/* Single property transition */
element {
  transition: property duration timing-function delay;
}

/* Multiple properties transition */
element {
  transition: property1 duration1 timing-function1 delay1,
              property2 duration2 timing-function2 delay2,
              /* Add more properties here if needed */
}


property: Specifies the CSS property to which the transition should be applied. You can use any CSS property that has a measurable intermediate state, such as width, height, background-color, opacity, etc.

duration: Specifies the time taken for the transition to complete, usually in seconds (s) or milliseconds (ms).

timing-function: Defines the acceleration or deceleration of the transition. It controls the intermediate values of the property during the transition. Common values include ease (default), linear, ease-in, ease-out, ease-in-out, and more.

delay: Optional. Defines a delay before the transition starts, specified in seconds (s) or milliseconds (ms).

Example 1: Buttons background color transitions between blue and red
/* Simple transition example */
button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: red;
}


In this example, when you hover over the button element, it will smoothly transition from a blue background color to a red background color over 0.3 seconds with an ease timing function.

Example 2: Simple Fade-In/Fade-Out of html element
.fade-in-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in-out:hover {
  opacity: 1;
}


This will create a smooth fade-in effect when hovering over the element and a fade-out effect when not hovering.

Example 3: Slide-In of html element from the Left:
// HTML
<div class="slide-in-left">Banner</div>

//css
.slide-in-left {
  transform: translateX(-90%);
  transition: transform 0.3s ease-in-out;
  border: 1px solid black;
  text-align: right;
}

.slide-in-left:hover {
  transform: translateX(0);
}


This will slide the element in from the left when hovering over it. It is used to expand a banner normally on a website.

Example 4: Color Change of html element:
.color-change {
  background-color: #3498db;
  transition: background-color 0.3s ease-in-out;
}

.color-change:hover {
  background-color: #e74c3c;
}


This will smoothly change the background color of the element when hovering over it.

Example 5: zoom of html element:
.scale-effect {
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

.scale-effect:hover {
  transform: scale(1.1);
}


This will zoom/scale the element slightly larger when hovering over it.

Example 6: Rotation of html element:
.rotate-effect {
  transform: rotate(0);
  transition: transform 0.3s ease-in-out;
}

.rotate-effect:hover {
  transform: rotate(45deg);
}


This will rotate the element by 45 degrees when hovering over it.

Example 7: Width Change of html element:
.width-change {
  width: 100px;
  transition: width 0.3s ease-in-out;
}

.width-change:hover {
  width: 200px;
}


This will smoothly change the width of the element when hovering over it.


These are just a few examples of the many animations you can create with CSS transitions. By using different CSS properties and timing functions, you can achieve a wide range of visual effects to enhance your web pages and user interactions.

PrevNext