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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
