CSS Animación e as súas posibilidades

Queres aprender como facer animación CSS, moitos usuarios van en busca de clases e instrucións. E aínda que estas instrucións que se pode acceder aquí, entre outras cousas, dámoslle o consello útil principal na creación de animación mediante CSS.

segredo desenvolvemento ideal

Consello que pode ser dado para aqueles que desexan coñecer plenamente o que é un CSS Animación suave, é o seguinte. Cando as experiencias diarias con pezas preparadas de código e tentar realizar as súas propias experiencias. O tempo libre do traballo nos seus propios sitios, para tratar de ver que pasa co dobrar de unha peza de código, para estudar esta ou aquela propiedade íntegro. Tentar implementar todo tipo de ideas interesantes usando un completamente diferentes ferramentas de linguaxe, e animacións CSS será aberta para vostede dun xeito novo. Este consello simple é esta - experiencia para si mesmo.

aspecto CSS-animación

E agora, para os exemplos interesantes. Como regra xeral, o uso estándar de animación é cambiar algúns elementos da páxina gradualmente ao longo do tempo. Pero iso é demasiado evidente, non é? Entón aquí compartimos contigo dun xeito extraordinario de usar o tempo da aparición de animación.

O feito de que os cambios reais para o sitio en un pedazo de animación ou na súa totalidade pode ser case instantánea. Para iso, pedimos calquera dous keyframes pero usa un intervalo moi pequeno. Por exemplo, pode ser igual a 0,001%. Neste caso, animación CSS pode instantaneamente. É perfecto para simular un sinal de neón. Este sinal piscará, e se o CSS Animación será, entón, máis transparencia e de usar e recurso text-shadow, o sinal será case como a cousa real.

Aquí está un exemplo de código.

Mellorar os botóns funcionais

Se consideramos o tema do que se pode inusual botón CSS-animación, pódese dicir que o botón de opcións de decoración en sitios de gran set. Considero un exemplo. O efecto de presionar os botóns convexos. Exemplo código - a continuación.

Cunha peza tan sinxelo de animación bloque CSS de código será moi ben. Parece moi interesante e é frecuentemente usado en completamente diferentes sitios.

CSS-animación cando pasa o rato sobre un fragmento de local

O sitio dinámico e moderno, máis tempo permanece no usuario. Ademais, un papel importante tamén vai por interactividade. Isto é gran verdade, pero o que pode axudar a facer o sitio tan interactivo posible?

Moi ben, entón ollar para traballar con elementos de deseño e fragmentos de sitio cando o rato. botóns de animación cando pasa discutir por riba, pero ademais de que pode "revivir" e varias pezas do sitio web, facendo-o máis elegante. Como en todo, o principio principal aquí - non esaxere.

Así, non é unha propiedade de transición excelente, o que pode levar ata catro propiedades relacionadas.

Durante un tempo determinado CSS-animación cando pasa o rato sobre este anaco de código cambiará. O tempo é determinado pola propiedade duración. Isto é, cando pasa o rato sobre un elemento que comeza un cambio peculiar calquera propiedade que nos propuxemos no selector. No noso caso, é - .element (de agora). Un pouco por baixo é un exemplo do código, cando a transición desde o recipiente de div, a cal ten a .hover pseudo, o fondo cambia do vermello ao verde.

Cando un usuario pasa a animación do rato CSS non cambia inmediatamente, pero adiada por unha fracción de segundo, o que crea un efecto interesante.

Ademais, se o exemplo anterior, pediu unha certa regra que fondo nun elemento div cambiou de vermello a verde e moverse dentro de 0,4 segundos, débese notar que o uso do todo o valor, pode aplicar a toda a propiedade é totalmente inmediatamente.

Exemplo código representado como segue.

Como se mostra nas propiedades de recheo e efecto de transición fondo vai ocorrer que é propiedade transición determinado. Ten que observar que pode especificar unha lista separada por comas un determinado conxunto de valores.

Algunhas pasaxes da utilización deste tipo de animación en botóns

En principio, a longo prazo non é tan importante en que orde será determinada e trasladada aos valores de datos. Agás nun caso. Podemos xestionar a propiedade de atraso. Neste caso, hai que especificar a duración e tempo. Noutras palabras, teremos o código para dicir canto tempo o moi necesario para nós terá lugar un atraso.

Tendo en conta que algunhas propiedades non pode ser o efecto de transición. É dicir, non poden ser transitorios. Isto é debido ao feito de que non se poden animados.

Animación de texto

Coa axuda do código pode ser definido e excelente texto animación CSS. Isto pode ser algún tipo de artigo, e un gran título, título do sitio web. Como mencionado arriba, a principal cousa - non esaxere e non transformar o seu sitio en un aterro sanitario, que vai mirar barato.

Ben, imos tentar descubrir o que animación CSS do texto, e crealo, e as sombras de texto. Poida que teña visto películas de terror, onde os propios nomes das pinturas parecían desaparecer en calquera fondo dim-escuro. Tentaremos recrear un exemplo xeral de algo así.

Animar o texto no estilo de películas de terror

En realidade, a idea é facer que o texto en que as cartas eran algo vago e ía executar. Na cal entre as letras debe ser un espazo. Usaremos sombra interalphabetic, así como o intervalo. Co fin de aplicar a idea, necesitamos un script Lettering.js autoría Dave Rupert. Precisaba embrulhar palabras máis algunhas letras no espazo tag. Primeiro, ten que implicar a frase en tag H2. Aquí está un exemplo de código.

Entón obernom todas as palabras H2 tags na extensión tag.

Acontece así.

Que vai mirar un pouco pesado, pero non deixes que isto se preocupar.

Maníaco obter estrutura suficiente.

Como resultado, temos cada unha das nosas letras existentes trapalladas nun período de etiqueta. Eles acabou realmente moi. Pero o exemplo é moi simplista no código enriba do resultado. A súa estrutura enteira, pode escribir-se, e vai ser un pouco máis. Tamén depende de que tipo de texto que querería empregar.

Concluímos noso traballo un pouco estilizada. Todos os nosos títulos no exemplo anterior, será situada en todo o ancho da pantalla. E van ocupar case todo o espazo dispoñible.

Dende que nós estamos indo a poñer todas as nosas cartas no centro da pantalla e, a continuación, para o noso recipiente e tamén necesitamos flexbox.

Aquí está un exemplo de código.

Agora temos feito para que todas as letras, que están implicados nunha span class, que pertence á clase pai .Os frases, será situado e será adxunto a el no medio.

Non te esquezas de engadir un pouco de espazo libre, que é en si mesmo espazo entre letras.

Neste caso, o primeiro invólucro quere ter certas propiedades adicionais. Esta perspectiva propiedade. Vai permitir-nos estar seguro de que esta web será como a destacarse, veñen á tona.

-Se como as nosas cartas será transparente, e imos publicar unha serie de animación para eles nalgún lugar en 5.2 segundos. Abaixo - exemplo de código.

Tamén é importante determinar como e con que demora aparecerá nosas sentenzas e frases. Cal das partes do texto aparecerá máis rápido que o anterior, e como. O código será coma este.

Imos dar un efecto pequeno, pero moi interesante. Pon a opacidade de 0,2. distancia Interalphabetic, polo tanto, será moi grande. Cartas tamén será xirada para varias Y. eixe Velo, así como usuarios do seu sitio será só unha pequena parte destas cartas. Ademais, non se esqueza de dar o efecto das propiedades text-shadow. Metade animación, fixemos algo inusual. Nós imos dirixir as propias cartas, e tamén para reducir a distancia que existe entre ambos, e logo aumentar a opacidade, e despois de sinais povernom en 0 por Y. eixe

Ao final, unha vez engadir algunhas letras ou en perigo promasshtabiruem eles. Isto dará un novo efecto de borrão pequeno.

E, finalmente, a última frase CSS-animación.

E si, por fin, engadir o toque final. Iremos concentrar nalgunhas palabras específicas. Terá un negrito. Isto dará a énfase necesaria.

Non esqueza sobre inspiracións

Ao tentar probar-se coas propiedades e animación CSS, tentar atopar inspiración en todo na vida cotiá. Isto pode ser calquera cousa de un interesante páxinas web para algún efecto de vídeo marabilloso.

Ademais, se non inmiscirse, como facer un ou outro efecto, e tentar recriá-lo por conta propia, pode conseguir grandes resultados. Ou, polo menos, sempre aprender algo máis sobre as posibilidades da linguaxe de programación que é, de feito, usalo. Nin mesmo plenamente realizados a súa idea pode moi ben vir a ser moi espectacular.