Learn CSS animations in 15 minutes! 🎬
HTML-код
- Опубликовано: 6 июн 2024
- #CSS #course #tutorial
CSS animation tutorial example explained
00:00:00 introduction
00:00:46 slide left
00:02:49 slide right
00:03:17 slide up
00:03:35 slide down
00:03:52 rotate
00:05:31 grow
00:06:14 shrink
00:06:44 fade out
00:07:21 fade in
00:07:48 color change
00:09:06 glow
00:10:06 :hover
00:10:38 :active
00:10:55 iteration count
00:11:27 direction
00:12:10 play state
00:12:34 timing function
00:14:25 exercise
![Dimension 20: Never Stop Blowing Up Trailer [Dropout Exclusive Series]](http://i.ytimg.com/vi/xYeXpbHnGEM/mqdefault.jpg)
Bro Code
/* style.css */
body{
background-color: hsl(0, 0%, 12%);
}
#box{
width: 250px;
height: 250px;
background-color: hsl(0, 100%, 62%);
font-size: 13em;
text-align: center;
}
img{
animation-name: slideLeft;
animation-duration: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
animation-timing-function: cubic-bezier(0.28,-1.48, 0.54, 2.21);
}
@keyframes slideLeft{
from{transform: translateX(300%)}
}
@keyframes slideRight{
to{transform: translateX(300%)}
}
@keyframes slideUp{
from{transform: translateY(300%)}
}
@keyframes slideDown{
to{transform: translateY(300%)}
}
@keyframes rotate{
50%{transform: rotateZ(360deg)}
}
@keyframes grow{
50%{transform: scale(2, 2)}
}
@keyframes shrink{
50%{transform: scale(0.5, 0.5)}
}
@keyframes fade{
100%{opacity: 1}
}
@keyframes colorChange{
0%{background-color: hsl(0, 100%, 62%)}
20%{background-color: hsl(35, 100%, 62%)}
40%{background-color: hsl(63, 100%, 62%)}
60%{background-color: hsl(103, 100%, 62%)}
80%{background-color: hsl(201, 100%, 62%)}
100%{background-color: hsl(268, 100%, 62%)}
}
@keyframes glow{
50%{box-shadow: 0px 0px 50px hsl(60, 100%, 64%)}
}
bro will you continue publishing lessons and videos ?
hey bro can you make a typescript fullcourse video thanks you presiated to all your work
How did you learn all this programming languages?
Hello, I have a problem. When I access the toolbox in Visual Studio, the tools are grayed out and I can't use them. Even though I changed the version to another version, the problem still persists. Is there any solution?
How did you know I'm right on this part on my full stack dev course lol what a chad
I loved it man don't stop ok this is the best channel to watch this programming stuff....and thank you very much mate ....🎉
I don't know how you do it but You are the coding Feynman! Simple and to the point!!!!!!
As good as usual 🔥
fantastic guide. thanks man
Hey bro code, I’m a really big fan and a pretty good programmer but I wanted to learn c++, I watched the whole video and I was wondering if you could do more advanced c++ videos who also include opening a window and programming a game, thank you and keep up with all of those good videos
how did u drop like 15 video at the same time lmao , bro code been cooking
, ty for everything best tuto ever
Thank you very much for what you do!
You are well known user of HTML and css.. You are a Master... Well-done
Best teacher ever ❤️
Bro please continue don’t stop
you should make a series for game engines like unity, unreal etc. could be really helpful for people wanting to learn game dev
Why didn't RUclips notify me of this new video? Oh well... nice to see you again Bro... and thank you very much for your videos! I learned a lot and got an A in Programming class thanks to your C++ videos!
This teaching method is very good.
I have some problems in this sections:
1.how to make a web pages.
2.how to connect our projects to to the internet.
3.how to make a complete projects from zero to hero?
4.how to manage our projects?
5.could you quid in one video how to start and how to complete?
i love you bro, youre goat, take care yourself
finally finished the series!
Best for ever❤❤❤
Hey Bro, many thanks for your content!!
Could you do a LaTeX tutorial? Would be very happy :)
Hi bro,
I really liked ur all series
Need Angular videos
really helpful video
Nice 🎉❤
Epic bro
tq😃
so coollll
Bro can you do a course in Advance Java topics like servlet, jsp, spring etc
HE BACK BOIS!
Bro please do videos on crud operations, Spring, spring boot and Restful APIs
hey bro can you make a typescript fullcourse video thanks you presiated to all your work
Hey, Bro, what fo you think about Java Spring tutorials?
Bro explains better without needing an hour
How do you make the animation stop like, when you hover over a thing there's a animation that turns it red and for me it goes back instead of stopping
You should consider doing a Kotlin, Rust, or Zig series… get some fresh 2000s into mix.
@broCodez How did you learn all this programming languages?
can you make a full course about postgreSQL
Bro please make tutorial on Typescript (Ts)
can you please make a full lua course
Make a video about flutter
hey bro, csn you pls make a series on pygame?
@BroCodez can you create a tutorial in kotlin
can you pls make a dart full course videon?
hey did you remove the chapter in your full c# video?
Why are all these gems unlisted?
Bro please make video for react js 🙏🙏
Bro, please create a super beginner friendly 3D game dev course with c# and unity. Plz. I am subscribed to you. Am I a fello bro?
Why unlisted?
The video is published now but comment are 3 months ago
Yeah I'm confused too
It was an unlisted video.
@@Janak217means what ??
@@memepower7 it means people who have access to this video's link can view it.
@@Janak217 oh kk 👍, ty bro
How are there comments from 3 months but video has been uploaded 6 days ago?
Bro code can you make reactjs full course 😢😢
What is your fav teacher?:
Bro Code
Bro Code
Bro Code
well the C course is 4 hour and python course is 12 hour
Bro I really need to know one thing. How did you have in-depth knowledge in many programming languages...
He took the heads of other immortals who knew how to program.
Please how to crak facebook or tiwter in python please
lmao finished