3

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>
Observe que nesse exemplo acima, o scale fez com que o objeto diminuísse para o centro, e não para o lado direito.

Como posso fazer isso em css?

2
  • 1
    Acho que esse é um caso para se usar animation e não transition. 20/08/2016 às 0:22
  • exato, use animation e depois responda sua própria pergunta com o resultado, caso tenha conseguido :D 22/08/2016 às 18:15

3 Respostas 3

0

Tente usar

transform-origin: bottom right;
0

Tente algo com transition-property:

div {
    -webkit-transition-property: width, height; /* Safari */
    transition-property: width, height;
}

ou defina regras mais especificas:

.box>div {...} /** seleciona apenas a primeira div filha de .box **/

0

Se eu entendi direito, você gostaria de personalizar o scale de um jeito e o translate de outro correto?

Você pode fazer isto através de keyframes, você define cada keyframe do jeito que desejar, e após isto através de animation você diz como cada uma deve se animar.

.box{
    height: 100px;
    background-color: pink;
    position:fixed;
    width:200px;
    height:200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
}

.box:hover{
    animation: animateScale 5s linear, animateTransform 2s linear;
}

@keyframes animateScale {
    0% { transform: scale(1); } 
    100% { transform: scale(0); }
}

@keyframes animateTransform {
    100% { transform: translate(-50%, -50%); }
}

e se você desejar animar somente uma você cria uma, e diz que somente esta irá animar

.box{
    height: 100px;
    background-color: pink;
    position:fixed;
    width:200px;
    height:200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
}

.box:hover{
    animation: animateScale 5s linear;
}

@keyframes animateScale {
    0% { transform: scale(1); } 
    100% { transform: scale(0); }
}

E dentro de cada {} do @keyframe você pode dar quantos comandos quiser

@keyframes animateScale {
    0% { transform: scale(1); } 
    100% { 
             transform: scale(0);
             background-color: red;
         }
}

Imagino que isso resolva :D

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .