Destaques
35 Apple disponibiliza MacBooks Air para o mercado educacional; design dos portáteis deverá mudar em 2012 Apple disponibiliza MacBooks Air para o mercado educacional; design dos portáteis deverá mudar em 2012

Nesta semana a Apple terminou de matar os MacBooks brancos, declarando “EOL” (End of Life — fim de vida) para o antigo portátil. Apesar de os movimentos da empresa [1, 2, 3] indicarem que o iPad *é o gadget educacional* da empresa, isso não quer dizer que ela não vai oferecer Macs específicos para escolas. [...]

7 Novas regras de sandboxing na Mac App Store não são unanimidade entre desenvolvedores Novas regras de sandboxing na Mac App Store não são unanimidade entre desenvolvedores

A partir de março, todos os aplicativos disponíveis na Mac App Store terão que rodar em modo sandboxing, o que garantirá uma maior segurança, já que a medida evita que um aplicativo faça qualquer coisa que seja desnecessária ao seu uso, limitando o acesso a conteúdos externos. Um exemplo simples: um editor de textos não [...]

0 Motorola perde uma batalha contra a Apple na Alemanha e tem processo descartado Motorola perde uma batalha contra a Apple na Alemanha e tem processo descartado

É, Motorola, pode “ficar querendo” seus 2,25% por iPhone vendido: o tribunal regional alemão de Mannheim negou hoje uma acusação da Motorola Mobility contra a Apple, relacionada ao uso de tecnologias 3G/UMTS. A vitória da Maçã vem uma semana depois de uma bela conquista de sua concorrente por lá, embora a Apple tenha conseguido reverter [...]

28 Apple e desenvolvedores já estão se preparando para demos de apps e jogos do próximo iPad Apple e desenvolvedores já estão se preparando para demos de apps e jogos do próximo iPad

Raramente vemos a Apple falando de especificações técnicas de seus produtos. No máximo, ela cita um pouco do processador, da capacidade gráfica e só. A estratégia para nos deixar de boca aberta, pensando “Uau! Esse iPhone 4S é sensacional!”, é simples: mostrar sua capacidade prática, demonstrando apps e jogos no próprio aparelho. Foi assim com [...]

24 Apple veicula dois novos comerciais do iPhone 4S focados na Siri: “Road Trip” e “Rock God” Apple veicula dois novos comerciais do iPhone 4S focados na Siri: “Road Trip” e “Rock God”

A Apple publicou agora há pouco, em seu site e no YouTube, mais dois comerciais do iPhone 4S — ambos dando prosseguimento à série focada na Siri. Road Trip De encontrar gasolina a descobrir um ótimo lugar para comer, a Siri pode ajudá-lo a ir de A para B como nunca. Rock God A Siri [...]

Home » Apple, Internet, Projetos, Software

WebKit agora traz suporte a animações em CSS

12 comentários postados
Atualizado: 01/04/2009 às 01:47
por
06/02/2009 às 15:33

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.

Animações CSS no WebKit

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>:

@-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;
}

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:

@-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;
}

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.

Related Posts Plugin for WordPress, Blogger...

Quem Escreve?
Silvio Sousa Cabral
Silvio Sousa Cabral
Paulista de 18 anos, possui formação técnica em Informática e Web design e é acadêmico do curso de Análise e Desenvolvimento de Sistemas da FTT, em São Bernardo do Campo. Possui paixão por Macs e iPods desde 2006, sendo também amante de música, cinema, design e tudo onde a plataforma Mac mostra o melhor de si. É dono de um MacBook branco e sonha em participar de uma Conferência de Desenvolvedores da Apple.
Comentários

Nosso sistema de comentários não foi carregado corretamente — muito provavelmente porque você está numa conexão lenta.

Por favor, atualize esta página e/ou certifique-se de que a excecução de JavaScripts está habilitada no seu navegador.

Mais Comentados da Semana

↪ Eike Batista afirma ter se reunido com o CEO da Apple, Tim Cook, agora há pouco
114 comentários

↪ Eis o comercial do Super Bowl da Samsung, mais uma vez atacando usuários de iPhones
95 comentários

↪ Empregado da Apple diz que tela do próximo iPad é “verdadeiramente surpreendente”
59 comentários

HTC admite: “Apple estava certa, foi um erro adotar o LTE tão cedo”
51 comentários

↪ Apple termina de matar os MacBooks brancos
50 comentários

Últimos Posts do Fórum

Comprar Iphone 4S pela central de atendimento Tim.
Úlimo post de: Gilberto.marquess

Instalando Mac Os Snow Leopard em Maquinas novas que vem com o LION
Úlimo post de: cariocap

Meu Macbook Pro de "pro" só tem o nome...
Úlimo post de: cariocap

Os paradigmas do OS X - dicas para novatos (e experientes)
Úlimo post de: Philippe.P

Compra de mac mini
Úlimo post de: Mateus Yuri Passos

MacMagazine em Redes Sociais
Enquete: participe!

Você já leu algum livro no iPad?

Busca na App Store

MacMagazine por Email

Preencha o seu email no campo abaixo para receber todas as nossas novidades gratuita e diretamente na sua Caixa de Entrada! ;-)

Joy of Tech

Joy of Tech - O que a Apple poderia fazer com seus US100 bilhoes

[ mais tirinhas ]

Arquivo do Blog

Navegue pelo nosso histórico mensal de artigos:

Shuffle!

Shuffle - Post Randômico

· · ·

Powered by Liquid Web

2002-2012 © MacMagazine.com.br — Todos os direitos reservados. Política de Privacidade  |  Anuncie Aqui  |  Sobre o MM  |  Contato Logo do MacMagazine