CSS3 TRANSITIONS

Por Davi Reinke

What the fuck???

“CSS3 é a mais nova versão das famosas Cascading Style Sheets [...]”
“A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.”
“A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.”

Só relógio???

"CSS3 transitions traz animações simples e elegantes para aplicações web, mas há muito mais na especificação do que parece à primeira vista."
"All you need to know about CSS Transitions",
ALEX MACCAW
"CSS3 transitions traz animações simples e elegantes para aplicações web, mas há muito mais na especificação do que parece à primeira vista."
"Deixar o navegador no controle das animações permite otimizar o desempenho e eficiência, alterando o frame rate, minimizando reflows e repaints e colocando um pouco do trabalho na GPU."
"All you need to know about CSS Transitions",
ALEX MACCAW
"Deixar o navegador no controle das animações permite otimizar o desempenho e eficiência, alterando o frame rate, minimizando reflows/repaints e colocando um pouco do trabalho na GPU."
Buttons Beach Hipster Dog

but...

Welcome to reality!

CSS LOL

CSS3 na vida real

1° Onde funciona?

webkit
moz
ms
o

2° Onde usar?

Button

3° COMO FAZ?

:pseudo-classes


.element {
  height: 100px;
  transition: height 2s linear;
}

.element:hover {
  height: 200px;
}
						
Demo

.class


/* CSS */
.element {
  opacity: 0.0;
  transform: scale(0.95) translate3d(0,100%,0);
  transition: transform 400ms ease, opacity 400ms ease;
}

.element.active {
  opacity: 1.0;
  transform: scale(1.0) translate3d(0,0,0);
}

.element.inactive {
  opacity: 0.0;
  transform: scale(1) translate3d(0,0,0);
}
						

/* JS with jQuery */
var active = function(){
  $('.element').removeClass('inactive').addClass('active');
};

var inactive = function(){
  $('.element').removeClass('active').addClass('inactive');
};
						
Demo

...

Simple example of CSS transition CSS Loaders CSS Roulette

Funções de Timing

Default

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
Demo

cubic-bezier


transition: all 1s cubic‑bezier(0.250, 0.250, 0.750, 0.750);
						
Demo

Mas e a tal da GPU?

Top & Left (CPU)

Translate 3D (GPU)

Width & Height (CPU)

Scale (GPU)

DÚVIDAS?

OBRIGADO!!!

CSS3 TRANSITIONS

Por Davi Reinke