upto to this point i have watched tons of videos and i found it not only the best animation tutorial video but the best coding video of all i mean i had no problem getting what u were saying and i made all these animations and other animation thanks to you and this video plzzz keep uploading more content
Hey Ali, thanks so much for this comment! Really appreciate your support, I will keep going! Anything in particular you’d like to see on the channel? 🙂👍
i guess if you don't add box-sizing: border-box to the divs, the border will scale outwards and not inwards. In that case, instead of filling up the square, the square will scale up in size. Great video btw!
I just discover your content. It’s awesome. Help me a lot. Thank you so much. ❤❤ I really want to watch all of your content. I’m sure that gonna help me to understand , memories all these things clearly. 🌹
I see that your channel is new. I saw your channel today and I already love it. I like how you talk clearly and simple. If you also do this in your future video, then your channel will grow for sure!
Gmx302 thank you so much for your wonderful comment! It’s very encouraging that you enjoy my videos, and I will continue to upload high quality, great content. There is so much more to come 👍👍 Thank you for your amazing support!! 🙂
how is the transform scale( ) [ used for circle animation lifecycle 0% , 25% and 100%) ] different from scale( ) [ used for circle lifecycle (50% and 75% ]?
i have a doubt regarding the the loading screen animation.... @keyframes circle{ 0% {border-color: red; transform: scale(1) ;} 25% {border-color: gold; transform: scale(1.1);} 50% {border-color: lime; *-transform-* : scale(1.3);} 75% {border-color: dodgerblue; *-transform-* : scale(1.1);} 100% {border-color: purple; transform: scale(1) ;} } in this code, you did not add the "transform" style. i thought that was a syntax error and you would correct it. so i just went ahead and corrected it myself. But now it seems like mine and your is different. Can you explain why did you skip the "transform" for the 50% and 75% keyframes?
Hey Rachel! Thank you so much for watching, really glad you enjoyed the content. I believe the coin is just a regular transparent png, thank you again, and please stay tuned for more 🙂👍
What is @keyframes, why should we use that, Iam asking this because it looks like a link from another website and it is completey different from css or html tags.
Hi Rahmath, thanks for watching 🙂👍 @keyframes is known as an At-rule in CSS, there are others as well such as @font-face and @import. The @keyframes rule defines the stages of our animation, think of it as a timeline. We need this to actually make our animation run. Hope this helps 👍
please help with this... the border-width i give to the square the loading screen animation is increasing the border outwards rather than inwards. i believe i typed every thing same as he did.
Hi Majid, thanks for watching. I guess you could use a screen recording software like OBS or Camtasia to capture the animation and save as an mp4 video file. Thanks for watching 🙂👍
Hi! I've just watched your videos, great explanations! Anw, I'd like to ask, when you specify the @keyframe square in 11:09, in the 75% keyframe, the border-width is set to 40px with the yellow border-color. But during the animation, while the box is rotating, how the box is *fully filled* with yellow color with only 40px border, while the square size is 75px x 75px? I think, there should be a gap between 40px border and 75px x 75px square even though you're using box-sizing: border-box.
Hi Jackie! Thank you so much for watching, I’m really glad they have been helpful 🙂 As to your question, the reason why the box is fully filled with a 40px border even though the size of the box is 75px, is because don’t forget the border width is applied to ALL sides simultaneously. Meaning 40px width for the top line of the square, 40px for the bottom line, and 40px each for left and right sides. 40px + 40px = 80px. This is the why the 75px height and width is fully filled. Hope this makes sense 🙂👍
@@DevDreamer Ah alright i see, so the total final size for the border is 2x border size, right? Also, what makes the border doesn't expand outside is because of the box-sizing property, isn't it?
Last one was easy ...
Done by pausing video except the hidden portion. Only !
Great videos !
Hey guys hope you enjoyed the video! 😃 If you found it helpful please let me know in the comments below 👇👇👇
I like it guy thanks
Hi, at 14:45 if we remove the coin keyframe of 50%, and directly set the 100% one, would there be any difference?
Your tutorials are the best on the subject. On point, no chit chat, super professional and very complete. Loving it!
Thank you!! 👍
The way of your teaching is excellent.
I am 49 yrs old from india and i am learning CSS.
upto to this point i have watched tons of videos and i found it not only the best animation tutorial video but the best coding video of all i mean i had no problem getting what u were saying and i made all these animations and other animation thanks to you and this video
plzzz keep uploading more content
Hey Fai Za! Thanks so much for this awesome comment, I’m really glad it’s been helpful 🙂👍
Wow😍.. Never seen anyone explaining these properties so Simply and in a short videomm Thanks Man.. Keep it going.
Hey Ali, thanks so much for this comment! Really appreciate your support, I will keep going! Anything in particular you’d like to see on the channel? 🙂👍
i guess if you don't add box-sizing: border-box to the divs, the border will scale outwards and not inwards. In that case, instead of filling up the square, the square will scale up in size. Great video btw!
thank-you .... struggled with this for a while . Wonder how his code works fine???!!!
You are just such a good person for helping us all out 😃 you really derserve more subs! ;)
I just discover your content. It’s awesome. Help me a lot. Thank you so much. ❤❤ I really want to watch all of your content. I’m sure that gonna help me to understand , memories all these things clearly. 🌹
Impressive! Clear, Concise and Professional with nice Jazzy Music. Great Tutorial!
Thanks Laura! 🙂👍
I wanna thank you from the depth of my 💜. You've been really helpful Dev.
Thank you Saif! 👍
this is so helpful and easy to understand, thank you so much!!
Glad you found it helpful, thanks for watching 🙂👍
your channel deserve more,
Thank you! I really appreciate that, thanks for watching and supporting 🙂👍
Thank you for the explanation. Greetings to you from Iraq🇮🇶
I love your channel.very straightforward and lively
Hi le nhu! This means so much to me, really appreciate it 😀
Me too
love the way you are explaining things..great work...subscribed already ...
Thank you so much 🙂 I really appreciate the feedback and support 👍👍
incredible! binging all of your videos this weekend :)
Oh man its really really really help full. In our journey. lot of love specially for you.
I love this, I will use it for my next project
Awesome, I’d love to see it 👍
Awesomely explained thanks dev
Hey Shubh, thank you very much 🙂👍
I really proud of you, sir !
Hey Ro Han! Thank you very much for the great support brother 🙂👍
😂😂😂😂😂😂
I see that your channel is new. I saw your channel today and I already love it. I like how you talk clearly and simple. If you also do this in your future video, then your channel will grow for sure!
Gmx302 thank you so much for your wonderful comment! It’s very encouraging that you enjoy my videos, and I will continue to upload high quality, great content. There is so much more to come 👍👍 Thank you for your amazing support!! 🙂
Your speec is very clear and precise👌👌👌
Thanks! I was able to animate the things I want to animate in my anime and manga lists on MAL.
I learn from this when I did the online job test 😊
Hey Marlina! That's awesome, really glad it's helped 🙂
nice :)
wow amazing tutorial! i would like to see more!
Hey ale buda, thank you so much! Please stay tuned for more 🙂👍
nicely done man , keep going ! 👌👍👍
Hey William, thank you so much, I will! 😀👍
That's what we say a man that worth a millions 😘👀bro can u make a series of css unique and amazing animations pleae
Great work!!! 👋👋👋
I find worth it... Thanks bro 🤜
Good Day, Sir. You are great, The video was very useful and informative. Thanks for you kind help. God may bless you with all success.
how is the transform scale( ) [ used for circle animation lifecycle 0% , 25% and 100%) ] different from scale( ) [ used for circle lifecycle (50% and 75% ]?
Thanks for lesson
Thank you for watching and for your support 🙂👍
Thank you, keep going with the great content :)
i have a doubt regarding the the loading screen animation....
@keyframes circle{
0% {border-color: red; transform: scale(1) ;}
25% {border-color: gold; transform: scale(1.1);}
50% {border-color: lime; *-transform-* : scale(1.3);}
75% {border-color: dodgerblue; *-transform-* : scale(1.1);}
100% {border-color: purple; transform: scale(1) ;}
}
in this code, you did not add the "transform" style. i thought that was a syntax error and you would correct it. so i just went ahead and corrected it myself. But now it seems like mine and your is different.
Can you explain why did you skip the "transform" for the 50% and 75% keyframes?
Besides that, mine signs an error for scale(1.3) syntax. The correct form is scale: 1.3; Do you figure it out?
@@ernanileiteribeirofilho675 i never got the answer to my question. But it seems you have different version, that's why syntax is different.
Super video. Thanks
Thanks Tajinder! I really appreciate it 😬👍
thank you very much !!
Hey Mai, thank you for watching 🙂👍
thank you
Great work
Hey Taqi, thank you very much 🙂👍
THANKS 😃
You're very welcome 🙂👍
that ending song, tho ;-; i want the full version plssss (nice content, bro!!)
super cool
Hey qianhui, thank you!
what an awesome channel
Hey RedRuby343 thank you so much for the amazing support! 😃👍
Awesome
Thanks! 🙂👍
excellent
Hey Nagesh, Thank you 🙂👍
Bro please add dropdown menu too.your classes soo easy to understand keeep makin them
Hey bro, thank you so much 🙂👍
Lov dis channel.
9:30 can anyone explain why did he just use scale(1.3) instead of transform:scale(1.3)?
Wow i loved this so much! thank you ! Where can you go to find 3d looking coins like that?
Hey Rachel! Thank you so much for watching, really glad you enjoyed the content. I believe the coin is just a regular transparent png, thank you again, and please stay tuned for more 🙂👍
What are you using to show your work in real time?
Hi there, do you mean the live reload? If so, that’s a feature in the text editor I’m using which is Brackets. Thanks for watching 🙂👍
title: the fastest way to learn animations
Hey Saif! Thank you brother 🙂👍
@@DevDreamer great teaching sir
tnks .
Hey Abenezer, thank you 👍
good
What is @keyframes, why should we use that, Iam asking this because it looks like a link from another website and it is completey different from css or html tags.
Hi Rahmath, thanks for watching 🙂👍 @keyframes is known as an At-rule in CSS, there are others as well such as @font-face and @import. The @keyframes rule defines the stages of our animation, think of it as a timeline. We need this to actually make our animation run. Hope this helps 👍
can I know which IDE you used?
Hey thanks for watching! Sure VS Code FTW 😉👍
Can anyone explain how it turns from a square into a circle?
10:38 - My box filling with border-width animation is too choppy & laggy. What to do?
May I ask why my cube is not even appearing? I made sure to set everything up like yours and still nothing ;-;
Hi Ethan, thank you so much for watching! Can you link to your code please?
You teach well and your voice is also great, but you're lacking in your mic quality ... Change your mic and you'll be the best
its better if you keep background color the same for 0% and 100%
Hey Joseph, thanks so much for watching 🙂 Thanks for the tip 👍
please help with this...
the border-width i give to the square the loading screen animation is increasing the border outwards rather than inwards. i believe i typed every thing same as he did.
the same problem here as well
@@jamolkhonumarov8009 still did not find the answer to it 😭
How to export to mp4?
Hi Majid, thanks for watching. I guess you could use a screen recording software like OBS or Camtasia to capture the animation and save as an mp4 video file. Thanks for watching 🙂👍
Hi! I've just watched your videos, great explanations!
Anw, I'd like to ask, when you specify the @keyframe square in 11:09, in the 75% keyframe, the border-width is set to 40px with the yellow border-color. But during the animation, while the box is rotating, how the box is *fully filled* with yellow color with only 40px border, while the square size is 75px x 75px? I think, there should be a gap between 40px border and 75px x 75px square even though you're using box-sizing: border-box.
Hi Jackie! Thank you so much for watching, I’m really glad they have been helpful 🙂 As to your question, the reason why the box is fully filled with a 40px border even though the size of the box is 75px, is because don’t forget the border width is applied to ALL sides simultaneously. Meaning 40px width for the top line of the square, 40px for the bottom line, and 40px each for left and right sides. 40px + 40px = 80px. This is the why the 75px height and width is fully filled. Hope this makes sense 🙂👍
@@DevDreamer Ah alright i see, so the total final size for the border is 2x border size, right? Also, what makes the border doesn't expand outside is because of the box-sizing property, isn't it?
Hey Jackie, that’s right 🙂👍
@@DevDreamer Superb! Thank you! Keep doing with your videos 🤟😇😇
Sir this which editor
Hi Tejas! This is the brackets text editor, you can download it from brackets.io 👍
please add javascript animations too
Hey Nitesh! Thanks for the support, I will be covering this in the JS tutorial 🙂👍
I don't master the flex display layout. cry :(
Can you please make your work more visible,
I downloaded this video and I couldn't even watch it, cuz it wasn't ligible enough.
very ambiguous screen. its very hazy man. but i love your tutoria.
Hey Online Pathshala! Thanks for watching and the critical critique 🙂 I will try to improve this going ahead 👍
please submit your lesson code from codepen
❤😊
Do you have any books or are you on WhatsApp