To create a CSS transition that changes a background color from dark to light, you can use CSS animations and the `transition` property. Here's an example of how to achieve this effect:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="color-flip"></div>
</body>
</html>
```
CSS (styles.css):
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0; /* Set your initial light background color here */
transition: background-color 0.5s; /* Adjust the duration as needed */
}
.color-flip {
width: 100px;
height: 100px;
background-color: #333; /* Set your initial dark background color here */
transition: background-color 0.5s; /* Adjust the duration as needed */
cursor: pointer;
}
.color-flip:hover {
background-color: #f0f0f0; /* Set your light background color here */
}
body:hover {
background-color: #333; /* Set your dark background color here */
}
```
In this example, we have a simple HTML structure with a div element that will transition its background color from dark to light when hovered. The `transition` property is used to control the smoothness and duration of the color change. You can adjust the colors and transition duration to fit your design.