3
IN THE css, we can use the property transition
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 above case, I used the option all
, where all properties are affected by transition
.
However, it is also possible to define which and how some properties are changed.
For example:
.box:hover{
transition: opacity 2s linear, background-color .2s ease;
}
Note that I have defined only opacity
and background-color
in the above example.
But I have a problem.
I have a div I wish to enliven your appearance through transform: scale(1)
. But that same div has a property inside transforming, which is translate(-50%, -50%)
.
Thus:
.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 cheer up the transform
, but only the scale
, I don’t want to animate the translate
. Can you do it in css
?
Because after I added Translate, the animation didn’t turn out the way I wanted it to. In this case, it has to look 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>
scale
caused the object to decrease to the center, not to the right side.
How can I do this in css?
I think this is a case to use
animation
and nottransition
.– Renan Gomes
exact, use Animation and then answer your own question with the result, if you have :D
– Murilo Melo