Duração da transição de vento favorável
Neste artigo, discutiremos a duração da transição Tailwind e como você pode usá-la para criar transições impressionantes em seu site.
No Tailwind CSS, a duração da transição é um componente crítico da criação de transições eficazes.
A duração da transição refere-se a quanto tempo leva para uma transição ser concluída.
Ele funciona especificando a duração da animação de transição em segundos ou milissegundos.
É um aspecto essencial da criação de transições suaves e contínuas no desenvolvimento web.
Classes de duração de transição de vento de cauda
Tailwind CSS fornece uma variedade de classes de duração de transição predefinidas:
| Aulas | Visão geral |
| duração-75 | Esta classe é usada para definir a duração de uma transição para 75ms. |
| duração-100 | Esta classe é usada para definir o tempo de transição como 100ms. |
| duração-150 | Usando esta classe, a duração de uma transição é definida como 150ms. |
| duração-200 | Neste caso, a duração de uma transição é especificada como 200ms. |
| duração-300 | O período de transição é definido como 300ms usando esta classe. |
| duração-500 | Esta classe garante que a transição durará 500ms. |
| duração-700 | Usando esta classe, o intervalo de transição é definido como 700ms. |
| duração-1000 | Neste caso, a duração de uma transição é definida como 1000ms. |
Sintaxe
<element class="duration-500">...</element>
O exemplo abaixo mostra a implementação de algumas classes de duração de transição no Tailwind:
Example:
1
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html> src="https://cdn.tailwindcss.com" class="m-3 text-center" class="text-gray-700 text-2xl font-semibold" MrExamples class="font-semibold my-2 text-slate-900"Transition Delay Class in Tailwind CSS class="text-gray-500 font-semibold my-2"Hover on the buttons for demonstration class="bg-gray-200 w-full m-4 grid grid-flow-col gap-4 p-5 font-medium" class="transition duration-75 ease-in-out text-slate-800 bg-amber-300 hover:bg-amber-400 hover:scale-110 rounded-lg px-3 py-2" duration-75 class="transition duration-150 ease-in-out text-amber-200 bg-slate-600 hover:bg-slate-700 hover:scale-110 rounded-lg px-3 py-2" duration-150 class="transition duration-300 ease-in-out text-slate-800 bg-fuchsia-400 hover:bg-fuchsia-500 hover:scale-110 rounded-lg px-3 py-2" duration-300 class="transition duration-700 ease-in-out bg-orange-400 hover:bg-orange-500 hover:scale-110 rounded-lg px-3 py-2" duration-700 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
O exemplo a seguir abrange as classes de duração de transição restantes no Tailwind que não foram abordadas no exemplo anterior:
Example:
1
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html> src="https://cdn.tailwindcss.com" class="m-3 text-center" class="text-gray-700 text-2xl font-semibold" MrExamples class="font-semibold my-2 text-slate-900"Transition Delay Class in Tailwind CSS class="text-gray-500 font-semibold my-2"Hover on the buttons for demonstration class="bg-gray-200 w-full m-4 grid grid-flow-col gap-4 p-5 font-medium" class="transition duration-100 ease-in-out text-slate-800 bg-amber-300 hover:bg-amber-400 hover:scale-110 rounded-lg px-3 py-2" duration-100 class="transition duration-200 ease-in-out text-amber-200 bg-slate-600 hover:bg-slate-700 hover:scale-110 rounded-lg px-3 py-2" duration-200 class="transition duration-500 ease-in-out text-slate-800 bg-fuchsia-400 hover:bg-fuchsia-500 hover:scale-110 rounded-lg px-3 py-2" duration-500 class="transition duration-1000 ease-in-out bg-orange-400 hover:bg-orange-500 hover:scale-110 rounded-lg px-3 py-2" duration-1000 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
