How to create CSS3 Transition Effects?
https://www.tutorialspoint.com/how-to-create-css3-transition-effects
-
13-09-2020 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
How to create CSS3 Transition Effects?
To create CSS3 Transition Effects, use the transition property. Following is the code for creating transition effects using CSS3 −
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s;
}
.container:hover div {
width: 100px;
}
</style>
</head>
<body>
<h1>Transition effects example</h1>
<div class="container">
<div></div>
</div>
<h2>Hover over the above div to reduce its width</h2>
</body>
</html>Output
The above code will produce the following output −
On hovering above the div −
Published on 11-May-2020 13:50:34
Advertisements
Not affiliated with Tutorialspoint
