CSS Transitions
CSS transition helps you to apply smooth, ordered transition, start to end transition, effect of different styles to any CSS element in HTML webpage. With CSS transition, you can manually control and manage the behaviour element control, speed control, user behaviour, object visual presentation etc. of a particular webpage element with CSS transition effect. CSS transition effect improves your website visibility, user experience, and website user experience.
So, let’s understand CSS transition effect behaviour in HTML web page in a better way.
Basic CSS transition syntax.
To apply CSS transition effect in any HTML webpage, you have to define CSS transition properties in those elements first. Which you want to manually apply animate or transition effect to your existing HTML webpage element. Where first of all you have to manage the start to end time of that transition and animation.
The basic syntax of transition in HTML web page.
selector type {
transition: property duration timing-function delay;
}
CSS transition properties in HTML web page.
CSS Transition Properties To apply transition effect through CSS transition to the desired object or element in any HTML webpage. Where you can apply effects like (element width, element height, object background-color), etc. in basic CSS transition effect. Here you can manually apply all CSS transition attributes to apply CSS transition effect to all webpage elements as per your web development requirement.
CSS Transition Attributes.
- CSS Transition Duration – The total time displayed for CSS transition in current HTML webpage element. For example, (0.5s, to 200ms) Time is in milliseconds.
- CSS transition timing-function – It defines the curve speed of CSS transition in HTML element in current webpage. Remember, this is a regular used common value.
- CSS transition ease-in – It starts the CSS transition speed in HTML element in current webpage slow. Slowly the speed increases, and finally the transition becomes slow automatically.
- CSS transition linear – It indicates a steady speed of CSS transition in HTML element in current webpage.
- CSS transition ease-in – It moves the CSS transition in HTML element in current webpage at slow speed.
- CSS transition ease-out – This starts a CSS transition fast in an HTML element in the current webpage, and then slows down automatically.
- CSS transition ease-in-out – This starts a CSS transition slow in an HTML element in the current webpage, and then terminates automatically.
- CSS transition delay – This is to delay the CSS transition effect in an HTML element in the current webpage. For example, (0s, to 300ms) is milliseconds.
Example of CSS transition in HTML element.
So let’s try a transition example with a button hover transition effect.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS Button Transitions Effect Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
background-color: black;
}
.transition-button {
padding: 20px 40px;
font-size: 18px;
color: yellow;
background-color: teal;
border: 10px;
border-radius: 80px;
font-family:times new roman;
cursor: pointer;
transition: background-color 0.4s ease, transform 0.4s ease; /* Add transition on background color and transform */
}
.transition-button:hover {
background-color: red; /* display button red color when it hover mouse */
transform: scale(1.40); /* it increase font size */
}
</style>
</head>
<body>
<button class=”transition-button”>Click And See Transition Effect</button>
</body>
</html>
Css Styles Files.
body {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
background-color: black;
}
.transition-button {
padding: 20px 40px;
font-size: 18px;
color: yellow;
background-color: teal;
border: 10px;
border-radius: 80px;
font-family:times new roman;
cursor: pointer;
transition: background-color 0.4s ease, transform 0.4s ease; /* Add transition on background color and transform */
}
.transition-button:hover {
background-color: red; /* display button red color when it hover mouse */
transform: scale(1.40); /* it increase font size */
}
CSS Multiple Transition Effects in HTML Webpage.
You can apply CSS transition effects to multiple webpage elements by separating CSS transition properties with commas.
CSS Multiple Transition Effects Example.
.transition-button {
transition: background-color 0.4s ease, transform 0.4s ease, color 0.4s ease; /* set multiple transition */
}
CSS Transition Other Properties in HTML Webpage Element.
You can apply CSS transition properties to other properties in your web page development. Like,
CSS other transition properties attributes.
- Opacity CSS transitions – This is used to apply fade CSS transition effect to HTML element in the current webpage.
- Position CSS transitions – This is used combined with change in position CSS transition value in HTML element in the current webpage.
- Size CSS transitions – This is used to apply change in position CSS transition width and height in HTML element in the current webpage.
- Transform CSS transitions – This is used to apply position CSS transition scaling, rotate etc. in HTML element in the current webpage.
Example of HTML opacity transition.
.fade {
opacity: 0; /* set css object 0 opacity */
transition: opacity 0.7s ease;
}
.fade-visible {
opacity: 1; /* set css transition object 1 opacity */
}
Use of JavaScript to trigger HTML web page transitions.
You can also apply JavaScript code to add or remove classes that trigger transitions on your web page.
const button = document.querySelector(‘.transition-button’);
button.addEventListener(‘click Me’, () => {
button.classList.toggle(‘fade-visible’);
});
CSS Transitions in HTML Element Conclusion.
CSS transition effects in HTML web pages are a powerful tool for creating attractive and interactive website user interfaces. You can visually represent your web page elements by applying multiple transition effects to different CSS element properties, thereby improving the web user experience.
