Reputation: 225
i have a circle its background color is set to red, i want to change its background on hover using css animation how can i do that? here is my code:
.circle{
background-color: red;
border-radius: 50px;
height: 100px;
width: 100px;
}
<html>
<body>
<div class="circle"></div>
</body>
</html>
Upvotes: 2
Views: 21226
Reputation: 804
.circle{
background-color: red;
border-radius: 50px;
height: 100px;
width: 100px;
}
.circle:hover{
background-color: green;
transition: all 0.5s ease;
background-position: left bottom;
}
<html>
<body>
<div class="circle"></div>
</body>
</html>
Upvotes: 3
Reputation: 1149
For Changing color using css animation try using the code below.
.circle
{
border-radius: 50px;
height: 100px;
width: 100px;
background: linear-gradient(to right, blue 50%, red 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 2s ease;
}
.circle:hover {
background-position: left bottom;
}
<div class="circle"></div>
Upvotes: 5
Reputation: 883
HTML
<div class="circle"></div>
CSS
.circle {
background-color: red;
border-radius: 50px;
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle:after {
width: 0;
height: 100%;
position: absolute;
left: 0;
transition: all ease 0.5s;
content: "";
background-color: blue;
}
.circle:hover:after {
width: 100%;
transition: all ease 0.5s;
}
Hope this will solve the issue.
https://jsfiddle.net/Lijin/06cwf3wq/2/
Upvotes: 3