1
00:00:01,780 --> 00:00:12,599
well in this video we are going to see and the animations that the tailwind provides us and it is the

2
00:00:12,599 --> 00:00:19,300
last video that I am going to do of what is relevant to the tailwind and we are going to continue doing our

3
00:00:19,300 --> 00:00:26,559
development of the backend and the front ok then here we are going to see the animations if you look

4
00:00:26,559 --> 00:00:34,719
en la página que vamos haciendo las pruebas que vamos haciendo pues aquí le he metido bueno

5
00:00:34,719 --> 00:00:44,340
cambié el napar del último vídeo vale le cambia el color le redondeado y algunas cosillas y le

6
00:00:44,340 --> 00:00:53,200
he metido animaciones bueno pues estas animaciones me las está proporcionando el propio

7
00:00:53,200 --> 00:01:02,500
tailwind if we go to the documentation we see that in transitions and animations

8
00:01:02,500 --> 00:01:08,819
here there are several options, it is worth as to put a delay at the time of

9
00:01:11,739 --> 00:01:21,459
look at how here I have only put it to register as that young man that change of color takes

10
00:01:21,459 --> 00:01:28,659
more than in these that I have not put it ok this is automatic here it makes that effect of the file

11
00:01:28,659 --> 00:01:36,400
the father and it is worth that it is always like more beautiful it is worth softer more beautiful we are going to put it here

12
00:01:37,780 --> 00:01:45,159
ok look ok here I put a young man and I put another good animation we have different

13
00:01:45,159 --> 00:01:52,900
animations this is the pin, it is worth that it is going up and down all the time I have these

14
00:01:52,900 --> 00:02:00,579
animations here it is worth spin that would be that it is spinning in the form of spin the one of the pin the one of the

15
00:02:00,579 --> 00:02:08,319
pulse is worth the one of the boats the bounce well I have these animations by default that this is as

16
00:02:08,319 --> 00:02:17,939
easy as coming to our classes and start using it let's go to the code and we see it is worth then

17
00:02:20,460 --> 00:02:26,319
in the code look at this button that is the bat I have here that is

18
00:02:26,319 --> 00:02:36,539
playing the pulse we are going to remove these for you to see how the pulse what it does is that it

19
00:02:36,539 --> 00:02:46,639
illuminates, it illuminates and it gets a little more transparent and it goes

20
00:02:46,639 --> 00:02:52,659
playing with that type of options with the jover I have put the animation in that this

21
00:02:52,659 --> 00:03:00,180
now I tell you how it works well the case is that if instead of the pulse we put it for

22
00:03:00,180 --> 00:03:10,259
example, animate the spin, okay, because what will be put is to turn around or there was another one that was the pin

23
00:03:11,860 --> 00:03:17,860
is worth that you see that what it does is that good effect you can put different animations

24
00:03:17,860 --> 00:03:26,419
to give a little more of a spark to your page, okay, well, if you look

25
00:03:26,419 --> 00:03:37,740
we are going to go back to the web if you look here I have different tabs, okay, one is the

26
00:03:37,740 --> 00:03:46,219
tailwind documentation, another is this one from eevee link that here we have different animations

27
00:03:48,020 --> 00:03:54,780
that are not bad, they are very good, it is worth that web developers

28
00:03:54,780 --> 00:04:02,719
usually use it a lot and this if you click on one you will have here the code that you would put the

29
00:04:02,719 --> 00:04:16,850
time wind in ts ok well here what I have done is in the jihad I have put this from the ts

30
00:04:16,850 --> 00:04:26,870
and I have copied the animation, I have copied all this and so I can take them, but we have to

31
00:04:26,870 --> 00:04:32,610
take into account that in our configuration file of the tailwind config.js, it is worth then here

32
00:04:32,610 --> 00:04:40,689
you have to make some changes that although it has all those animations because it is not more

33
00:04:40,689 --> 00:04:49,089
work of a developer of dao of a web developer to us with knowing how to use

34
00:04:49,089 --> 00:04:55,470
animations that the framework itself provides us that we are using because I think that

35
00:04:55,470 --> 00:05:05,930
to get the idea and continue working in class it is worth it, then there is the tailwind css animate

36
00:05:05,930 --> 00:05:23,110
ok there is this this this link and well we can use it as it is from the tailwind itself and it is also

37
00:05:23,110 --> 00:05:33,029
quite comfortable ok how it is used if we come down here ok you see that you have the one that we install

38
00:05:33,029 --> 00:05:41,490
the npm install minus delta and wind css animate ok I'm going to give the readme then here it is

39
00:05:41,490 --> 00:05:50,110
telling you the steps it says first install the tailwind css animated then in config j s there is

40
00:05:50,110 --> 00:05:58,329
street you have to put inside the plugin this plugin is worth and to use it it puts me here

41
00:05:58,329 --> 00:06:05,290
different options that what it does, it puts an animation that is the one of jump, it puts a

42
00:06:05,290 --> 00:06:14,189
300 law, well, we are going to do this, then stay with how to enter here I am going to the code

43
00:06:14,189 --> 00:06:24,529
once in the code because we are going to do what we have said then I am going to remove this I am going to

44
00:06:24,529 --> 00:06:35,769
remove it is also worth and in principle I do not have any animation in my button it is worth this I leave them

45
00:06:35,769 --> 00:06:43,870
I am playing with the one of the bat this is worth then what is the first thing that

46
00:06:43,870 --> 00:06:58,610
me ha dicho que haga instalar el npm y vale entonces control c vale aquí lo voy a parar

47
00:06:58,610 --> 00:07:08,480
control vale aquí le pondríamos el control v s menos de mayúscula es para que nos haga la

48
00:07:08,480 --> 00:07:16,220
dependency in the package.json file, then with the "-d", it will put that

49
00:07:16,220 --> 00:07:20,180
dependency, I already have it installed, so it creates this dependency for me,

50
00:07:22,839 --> 00:07:29,339
that it should be, yes, well, it creates those dependencies and there is no other type of dependencies

51
00:07:29,339 --> 00:07:37,579
that are the development ones, it is worth that we are going to need them, well, at the end of those parameters

52
00:07:37,579 --> 00:07:42,560
is for you to create a type of dependency at least of uppercase is for dependencies

53
00:07:42,560 --> 00:07:51,980
of development ok then I launch the npm and tailwind css animate

54
00:07:57,100 --> 00:07:59,819
let's see what

55
00:07:59,819 --> 00:08:11,899
we launch the command, it has already been installed, perfect, this was just to show it,

56
00:08:11,899 --> 00:08:19,639
okay, and then now, once we have it installed, we go to the time with fin j s and

57
00:08:19,639 --> 00:08:27,259
we have to add this line within the plugin, okay, as it is telling us in the documentation,

58
00:08:27,259 --> 00:08:35,500
Okay, and from here we could already use those animations that the

59
00:08:35,500 --> 00:08:42,200
Tilewind CSS Animated is providing me, okay? So we are going to come to our code and we are going to start playing

60
00:08:42,200 --> 00:08:49,259
with the same example that it puts here. We are going to make this a little bigger, so that we can see it well.

61
00:08:49,259 --> 00:08:59,100
Okay, then it tells me, well, you have to put the class, the animate, okay? So I'm going to put here, for example,

62
00:08:59,100 --> 00:09:07,919
ok and this is what it is going to do to us is that

63
00:09:19,139 --> 00:09:29,039
it is not started, sorry, we are going to start this again, it is worth it, it is worth it and then look at

64
00:09:29,039 --> 00:09:41,159
how it makes that movement so it is worth how it is balanced a little bit ok well then what else are we going

65
00:09:41,159 --> 00:09:48,840
to put or see what he told us here in the help he says ok let's put the anime jam in

66
00:09:50,159 --> 00:09:57,789
ok then we are going to put the anime jam in here

67
00:09:57,789 --> 00:10:15,139
animate de ley de ley de 300 y que más me ha puesto el anime

68
00:10:20,850 --> 00:10:24,190
200 anime

69
00:10:24,190 --> 00:10:47,779
then we go to our page we see how good they do it to us, they admit a delay of this one, I will tell you

70
00:10:47,779 --> 00:10:55,460
that delay that we have given that we have said of 300 is worth if this one also to see it better I

71
00:10:55,460 --> 00:11:06,559
I'm going to put it with the hoover ok then when I give it

72
00:11:06,559 --> 00:11:13,830
it starts to tremble and it's very ugly

73
00:11:15,830 --> 00:11:23,159
1000 so it is better

74
00:11:23,159 --> 00:11:28,519
when you overdo it, it does that, okay

75
00:11:28,519 --> 00:11:32,600
and the 11

76
00:11:32,600 --> 00:11:35,960
infinite durations

77
00:11:39,259 --> 00:11:50,240
ok and so I remove the joder and that it does not go down ok then look at how now it does it to you all

78
00:11:50,240 --> 00:11:56,960
the time ok well this video does not have much more history to use animations

79
00:11:58,159 --> 00:12:05,559
I already tell you that the own animations or transitions if you want, it is not so bad

80
00:12:05,559 --> 00:12:15,879
and you can do things here because the transition is worth it is that you try it is that it does not have

81
00:12:15,879 --> 00:12:29,269
much more to give that type of base this because it makes this type of things good

82
00:12:29,269 --> 00:12:38,440
property of transition this I am going to put it as you are living it if you want

83
00:12:38,700 --> 00:13:01,320
The duration, the timing, the delay, what we have said about the delay, well, you have these options and also remember that Tailwind allows us to use the Tailwind CSS Animated

84
00:13:01,320 --> 00:13:07,019
I think it's interesting, so with this we finish these videos with the Tailwind

85
00:13:07,019 --> 00:13:12,519
you can configure it, you can complicate it, you can do things that are very cool

86
00:13:12,519 --> 00:13:20,720
and from the next video we continue with the From

87
00:13:20,720 --> 00:13:25,019
we are going to continue working with the From

88
00:13:25,019 --> 00:13:29,019
and that's it, a greeting, see you later