Atraso CSS

Este artigo discutirá o uso da propriedade CSS Atraso em HTML. A propriedade de atraso é usada como uma subparte para duas propriedades diferentes, que são propriedades de transição e animação. Em ambas as propriedades, cujo elemento é atribuído sofre alguma transformação. Durante esta transformação, a propriedade de atraso pode ser usada para interromper a transformação por um determinado período. Agora, implementaremos vários exemplos para esta propriedade.

Exemplo 1: atraso de transição em uma divisão de largura usando a abordagem de tag de estilo

Neste exemplo, usaremos a propriedade Atraso para fazer a transição de um div. A propriedade de atraso de transição será aplicada em uma div e a transição acontecerá na largura da div.

Neste script, começaremos com o cabeçalho do arquivo. Abriremos a tag de estilo e criaremos uma classe de estilo para o elemento div nesta tag. Nesta aula de estilo, adicionaremos altura e largura para o tamanho padrão da div. Depois disso, adicionaremos a propriedade de transição na largura usando -a como uma palavra -chave. Então, definiremos a duração da transição em segundos. No final desta tag, também definiremos a restrição de atraso de transição, dando -lhe um valor em segundos.

Depois disso, herdaremos esta classe para uma função pairar na qual adicionaremos a propriedade de largura, que seria aumentada a partir da configuração anterior e ativada quando a div é pairada. Essa mudança de largura será administrada pelas propriedades de transição, incluindo a propriedade de atraso de transição, que decidirá a diferença de tempo para esta transição. Em seguida, terminaremos as propriedades de estilo e fecharemos a tag de estilo para avançar em direção ao corpo do arquivo. Daremos à página um cabeçalho na etiqueta do corpo usando o H1 marcação. Depois disso, adicionaremos um elemento div por uma tag div, onde não agregaremos nenhum valor porque tudo está definido na tag de estilo no cabeçalho do arquivo.

O primeiro trecho mostra que a div está em seu estágio padrão. Depois de pairar na div, a transição acontecerá de acordo com as propriedades definidas na etiqueta de estilo que pode ser observada no segundo trecho.

Exemplo 2: Atraso de transição em uma divisão em termos de altura usando a abordagem de tag de estilo

Neste exemplo, usaremos o atributo de atraso para fazer a transição de um elemento div verticalmente usando a técnica de tag de estilo.

Começaremos com o cabeçalho do arquivo neste script. Abriremos a etiqueta de estilo nesta tag e construiremos uma aula de estilo para o elemento div. Nesta classe de estilo, adicionaremos altura e largura para o tamanho padrão da div. Depois disso, usaremos uma palavra -chave para adicionar o atributo de transição à altura de uma div. Então, após esta etiqueta, definiremos o tempo de transição em segundos e a restrição de atraso de transição, fornecendo um valor em segundos. Vamos herdar esta classe para uma função pairar e adicionar a propriedade de altura, que será aumentada do valor anterior e ativada quando a div mirada pairou. Essa mudança de altura será gerenciada pelas propriedades de transição, que incluem a propriedade de atraso de transição e determina a diferença de tempo para esta transição.

Depois disso, adicionaremos um elemento div com uma tag div no corpo. O arquivo será fechado fechando todas as tags.

A primeira saída mostra que a div está em seu estado padrão. Quando passamos por ele, a transição ocorre de acordo com as propriedades fornecidas na tag de estilo, exibidas na segunda saída.

Exemplo 3: Atraso de animação no lado superior de uma div usando a abordagem de tag de estilo

Neste exemplo, utilizaremos a propriedade Atraso enquanto empregamos a abordagem de tag de estilo para animar um elemento div do lado superior.

Neste script, começaremos com o cabeçalho do arquivo. Abriremos a tag de estilo e criaremos uma classe de estilo para o elemento div nesta tag. Adicionaremos altura e largura para o tamanho padrão da div nesta classe de estilo. Depois disso, usaremos uma palavra -chave para adicionar a propriedade de animação da div. Então, no final desta etiqueta, forneceremos o tempo de animação em segundos e a restrição de atraso de transição, fornecendo um valor em segundos. Vamos fazer uma nova classe para a animação e adicionar uma propriedade de tamanho para o lado superior da div que será aumentado em relação ao valor anterior e ativo após o período de atraso.

As propriedades de transição controlarão a animação, incluindo a propriedade de atraso de animação, que controla a lacuna do tempo antes do início da animação. Os atributos de estilo serão removidos e a etiqueta de estilo será fechada, permitindo -nos seguir o corpo do arquivo. Vamos adicionar um elemento div com uma tag div, mas sem valor, porque tudo está definido na tag de estilo do arquivo.

A primeira saída mostra que a div está em sua posição padrão. Quando o tempo de atraso de animação termina, a animação ocorre de acordo com as propriedades fornecidas na tag de estilo, como visto na segunda saída.

Exemplo 4: Atraso de animação no lado esquerdo de uma div usando a abordagem de tag de estilo

Neste exemplo, usaremos o atributo de atraso em conjunto com o método de tag de estilo para animar um elemento div do lado esquerdo.

Neste script, começaremos com o cabeçalho do arquivo. Abriremos a tag de estilo e criaremos uma classe de estilo para o elemento div nesta tag. Adicionaremos altura e largura para o tamanho padrão da div nesta classe de estilo. Depois disso, usaremos uma palavra -chave para adicionar a propriedade de animação da div. Então, no final desta etiqueta, forneceremos o tempo de animação em segundos e a restrição de atraso de transição, fornecendo um valor em segundos.

Vamos fazer uma nova classe para a animação e adicionar uma propriedade de tamanho para o lado superior da div que será aumentado em relação ao valor anterior e ativo após o período de atraso. As propriedades de transição controlarão a animação, incluindo a propriedade de atraso de animação, que controla a lacuna do tempo antes do início da animação. Os atributos de estilo serão removidos e a etiqueta de estilo será fechada, permitindo -nos seguir o corpo do arquivo. Vamos adicionar um elemento div com uma tag div, mas sem valor, porque tudo está definido na tag de estilo do arquivo.

A div está em sua posição padrão, como mostrado no primeiro resultado. Após o timer de anulação do ano, a animação acontece de acordo com os parâmetros especificados na tag de estilo, como visto na segunda saída.

Conclusão

Neste artigo, discutimos o uso da propriedade de atraso do CSS na linguagem de marcação de hipertexto. A propriedade de atraso é comumente usada com a propriedade de transição e animação do CSS. Esta propriedade é usada como uma subproperta para a propriedade de animação e transição, o que ajuda a definir o atraso da propriedade individual. Implementamos essas propriedades com a propriedade Atraso como uma subpropertia no ambiente do bloco de notas ++.