Transitions:
CSS transitions are used to smoothly change an element's style over a specified duration. They are
typically triggered by changes in CSS properties, such as hover, focus, or active.
Here's how to create a simple CSS transition:
Example:
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s ease-in-out;
}
box:hover {
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
Animation:
CSS animations allow you to create more complex and controlled motion effects. They involve defining
keyframes and applying those keyframes to an element.
Here's how to create a simple CSS animation:
Example:
<html>
<head>
<style>
@keyframes slide {
0% {
left: 0;
}
100% {
left: 200px;
}
}
.abc {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
animation: slide 2s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
Output:
