Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3 Transitions</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">
<style>
body {
font-family: "Comic Sans MS", sans-serif;
}
div {
height: 100px;
width: 100px;
background-image: url("img/image6.jpeg");
border-radius: 10px;
box-shadow: 0 0 15px black;
}
.t_width {
transition: width 2s;
}
.t_width:hover {
width: 300px;
}
.t_height {
transition: height 2s;
}
.t_height:hover {
height: 300px;
}
.t_both {
transition: height, width 4s;
}
.t_both:hover {
width: 300px;
height: 300px;
}
.t_rotate {
transition-delay: 10s;
transition-property: rotate;
}
.t_rotate:hover {
transform: rotate(-45deg);
}
.t_timing {
transition-delay: 10s;
transition-property: scale;
transition-timing-function: ease-in-out;
}
.t_timing:hover {
transform: scale(2, 3);
}
</style>
</head>
<body>
<!-- Transition Width -->
<h2>Transition Width</h2>
<div class="t_width"> </div>
<!-- Transition Height -->
<h2>Transition Height</h2>
<div class="t_height"></div>
<!-- Transition Both -->
<h2>Transition Both</h2>
<div class="t_both"></div>
<!-- Transition Rotate -->
<h2>Transition Rotate</h2>
<div class="t_rotate"></div>
<!-- Transition Timing Function -->
<h2>Transition Timing Function</h2>
<div class="t_timing"></div>
<br><br><br>
</body>
</html>
Output:
