NO css , we can use the transition
property to define a transition effect when some of the properties of an element are changed.
Example:
.box{
transition: all 1s linear;
background-color: purple;
height: 200px;
box-sizing:border-box;
}
.box:hover{
background-color: #add555;
box-shadow: 0 0 10px 10px #000 inset;
}
<div class='box'></div>
In the case above, I used the all
option, where all properties are affected by transition
.
However, you can also define which and how some properties are changed.
For example:
.box:hover{
transition: opacity 2s linear, background-color .2s ease;
}
Note that I set only opacity
and background-color
in the above example.
But I have a problem.
I have a div that I want to animate its appearance with transform: scale(1)
. But this same div has a property inside transform, which is translate(-50%, -50%)
.
So:
.box{
height: 100px;
background-color: pink;
position:fixed;
width:200px;
height:200px;
left: 50%;
top: 50%;
transform: scale(1) translate(-50%, -50%);
transition: transform 1s linear;
}
.box:hover{
transform:scale(0) translate(-50%, -50%);
}
<div class="box"></div>
I need to animate transform
, but only scale
, I do not want to animate translate
. Can you do this in css
?
Because after I added the translate, the animation was not what I wanted. In case, it has to be something like this:
.box{
height: 100px;
background-color: pink;
position:fixed;
width:200px;
height:200px;
left: 30%;
top: 30%;
transform: scale(1);
transition: transform 1s linear;
}
.box:hover{
transform:scale(0);
}
<div class='box'></div>
How can I do this in css?