NO css, podemos usar a propriedade transition
para definir um efeito de transição quando algumas das propriedades de um elemento forem mudadas.
Exemplo:
.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>
No caso acima, utilizei a opção all
, onde todas as propriedades são afetadas pelo transition
.
Porém, é possível também definir quais e como algumas propriedades são alteradas.
Por exemplo:
.box:hover{
transition: opacity 2s linear, background-color .2s ease;
}
Observe que defini apenas opacity
e background-color
no exemplo acima.
Porém estou com um problema.
Tenho uma div que desejo animar a sua aparição através de transform: scale(1)
. Porém essa mesma div tem uma propriedade dentro de transforma, que é translate(-50%, -50%)
.
Assim:
.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>
Preciso animar o transform
, porém somente o scale
, não quero animar o translate
. Tem como fazer isso em css
?
Pois depois que adicionei o translate, a animação não ficou como eu gostaria. No caso, tem que ser mais ou menos assim:
.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
fez com que o objeto diminuísse para o centro, e não para o lado direito.
Como posso fazer isso em css?
animation
e nãotransition
.