WebKit agora traz suporte a animações em CSS
Ficamos um bom tempo sem saber de novidades do time de desenvolvimento do WebKit, que trabalha bastante no motor de renderização de páginas do Safari — também usado no Google Chrome. Entretanto, isso não quer dizer que eles não ficaram sem trabalhar durante todo esse tempo: durante essa semana, anunciaram o suporte a animações em CSS, o que significa que qualquer navegador baseado na versão mais recente do WebKit será capaz de visualizá-las sem a necessidade de nenhum plugin.
Se você quiser, pode baixar a versão de testes mais recente do WebKit e visualizar alguns exemplos que vou descrever abaixo. Se você estiver inscrito na previsão de desenvolvedores do Google Chrome 2.0 e está deixando que ele instale atualizações automaticamente, também poderá conferir as demonstrações. E, caso você possua um iPhone ou iPod touch, saiba que essas animações já são suportadas no Mobile Safari a partir da versão 2.0 do iPhone OS.
Especificar animações dessa forma é bem fácil, caso você seja um desenvolvedor web. São utilizados vários parâmetros exclusivos do WebKit, começando pela regra @-webkit-keyframes, na qual você utiliza quadros-chave para especificar o estado inicial, o estado final e, caso preciso, pontos suplementares entre esses dois estados. Uma vez que essa parte do código esteja pronta, são aplicadas as suas propriedades de execução, que podem incluir tempo, nome, cores diferentes ou até um número máximo de execuções para que seja interrompida automaticamente.
Abaixo, está o código de um exemplo simples, feito pelo time do WebKit. Note que esse código deve ir entre as tags <head> e </head> da página, sempre entre <style type="text/css" media="screen"> e </style>:
[code lang="css"]@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}
div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
width: 40%;
padding: 0.2em 1em;
position: relative;
left: 0px;
background: #aaaaff;
}[/code]
Você pode conferir um exemplo do código acima — caso esteja rodando o build mais recente do WebKit — nesta página.
O código a seguir foi usado para fazer uma caixa de texto assumir posições e cores diferentes. Note que os quadros-chave começam com valores percentuais, justificando em que parte do tempo total da animação acontecerá a interpolação de um para o próximo:
[code lang="css"]@-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
div {
background-color: red;
width: 40%;
padding: 0.2em 1em;
margin: 6em;
}[/code]
Essas interpolações podem alterar a sua cor, tamanho e inclinação, obtendo diversos efeitos legais para páginas sem a necessidade do Flash Player. Aqui está um exemplo do código acima em ação.
O suporte a animações em CSS (CSS Animations) é apenas uma das novidades internas propostas pelo time de desenvolvimento do WebKit, a fim de dar aos desenvolvedores web o poder de criar conteúdo rico em interatividade sem depender tanto de plugins externos, o que promete ser muito bom no Safari 4, que está em desenvolvimento e provavelmente será apresentado pela Apple como uma novidade do Mac OS X 10.6 Snow Leopard, durante a próxima WWDC.
Se quiser conhecer mais sobre essa novidade, saiba que já é possível encontrar mais exemplos de uso do que os apresentados neste artigo de exemplo, além de documentos complementares. Basta acompanhar a comunidade de desenvolvedores da Apple para a web e a documentação oficial do time de desenvolvimento do WebKit.
"eles anunciaram o CSS"
Nao entendi muito bem…
O webkit ja tinha suporte a CSS.
O novo que "durante essa semana, eles anunciaram" sao as animacoes em CSS, nao eh?
exato
background: #aaaaff;
Aff… ;P
Meu Safari 3.2.1 não suporta, e o Webkit que atualizei semana passada suporta animação. Isso é uma notícia interessante para usuários de iPhone, dá pra fazer coisas legais quando atualizarem o sistema e o browser suportar o novo Webkit, só estou preocupado com os programadores sem noção, que vão animar tudo e forçar o aparelho a descarregar logo a bateria!
Funciona no IE ??
Até quando a internet será limitada por um browser?
Não funciona nem no firefox, é *exclusivo* do Webkit (maravilha!)
Q vire padrao. Se não vai só vai ser coisa de nicho. =/ die ie. die! hehe.
No lugar de comemorar eu vou ter que dizer que não acho interessante que o WebKit tenha criado seu próprio padrão de animação em CSS. Até porque, o CSS é estritamente para a camada de visual e animação já seria a camada de comportamento, ou seja JavaScript. Comemoraria se eles tivessem conseguido uma maneira de estimular o uso do SVG + JavaScript pra fazer essas animações no lugar de criar uma padrão próprio que vai contra os princípios do próprio CSS.
Eu entendo que o iPhone exija uma interface adaptada dos sites por ser uma maneira totalmente nova de navegar (tap e não click), mas esses padrões do WebKit me lembram o tempo em que a maioria da Web desenvolvia só pra IE porque ele era o navegador que dava menos erro de JS e tinha ActiveX, onde na verdade o IE é que tinha seus próprios padrões "errados".
Um pena.
é um ˜padrão exclusivo˜ hausahu
Acessei as páginas e não consegui ver as animações. Hoje eu não tenho instalado nada em meu mac, será que é por isso? Se for ter que instalar mais uma coisa para ver animações, concorda que seria mais um plugin para instalar?
Anunciaram o CSS? Há quanto tempo?
[...] sem a necessidade de conexão com a internet, além de CSS3 para efeitos avançados e animações sem a necessidade de plugins. Graças a isso, ele é o primeiro navegador não-experimental a [...]