Learn CSS animations in 15 minutes! 🎬

Поділитися
Вставка
  • Опубліковано 28 гру 2024

КОМЕНТАРІ •

  • @BroCodez
    @BroCodez  Рік тому +34

    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%)}
    }

    • @mohammadkassir6713
      @mohammadkassir6713 Рік тому

      bro will you continue publishing lessons and videos ?

    • @yusufbadem7223
      @yusufbadem7223 Рік тому +2

      hey bro can you make a typescript fullcourse video thanks you presiated to all your work

    • @Taril69
      @Taril69 Рік тому +2

      How did you learn all this programming languages?

    • @hamza15153
      @hamza15153 Рік тому

      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?

  • @Ella_1994
    @Ella_1994 9 місяців тому +1

    I don't know how you do it but You are the coding Feynman! Simple and to the point!!!!!!

  • @rayrockrlol
    @rayrockrlol Рік тому +26

    How did you know I'm right on this part on my full stack dev course lol what a chad

  • @hesamsa
    @hesamsa 4 місяці тому +4

    I just finished the CSS course, you are awesome bro, I love you. Please make more of these important courses. thanks

  • @dennis_woo
    @dennis_woo 14 днів тому

    Thanks so much for making a concise easy to understand tutorial on this topic. I can also refer to your video as a quick reference. Thanks so much. Keep up the good work.

  • @soheibmiloudi1883
    @soheibmiloudi1883 Рік тому +2

    how did u drop like 15 video at the same time lmao , bro code been cooking
    , ty for everything best tuto ever

  • @harinivarma2189
    @harinivarma2189 Рік тому +3

    Bro please continue don’t stop

  • @MIrfan-yx5qq
    @MIrfan-yx5qq 8 місяців тому

    You are well known user of HTML and css.. You are a Master... Well-done

  • @drako-mp3fp
    @drako-mp3fp Рік тому +6

    you should make a series for game engines like unity, unreal etc. could be really helpful for people wanting to learn game dev

  • @htvital4184
    @htvital4184 Рік тому +2

    Best teacher ever ❤️

  • @tommy.3377
    @tommy.3377 Рік тому +1

    I loved it man don't stop ok this is the best channel to watch this programming stuff....and thank you very much mate ....🎉

  • @riotem680
    @riotem680 Місяць тому

    u deserve more subscriber and more view . u are the master man

  • @AbrahamIhezuo
    @AbrahamIhezuo Місяць тому

    Very great and impressive tutorial, so understandable and smooth😏

  • @yanivedelson
    @yanivedelson Рік тому +6

    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

  • @iamveryrich66
    @iamveryrich66 5 місяців тому +1

    Best youtuber ever ❤

  • @ChalooseSina
    @ChalooseSina 3 місяці тому

    that was one the most fun css methods

  • @gulmuradrahi6066
    @gulmuradrahi6066 Рік тому +4

    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?

  • @hoangrich
    @hoangrich Рік тому

    i love you bro, youre goat, take care yourself

  • @hdgdjgsgfj1297
    @hdgdjgsgfj1297 Рік тому

    Why didn't UA-cam 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!

  • @user-dk9of1ok1n
    @user-dk9of1ok1n 6 місяців тому

    Bro!!! You are authentic.

  • @Yumiesthetic
    @Yumiesthetic Рік тому +1

    finally finished the series!

  • @harshjaiswal1634
    @harshjaiswal1634 Рік тому +3

    Bro can you do a course in Advance Java topics like servlet, jsp, spring etc

  • @dorklol2969
    @dorklol2969 11 місяців тому

    fantastic guide. thanks man

  • @valerioporcelli
    @valerioporcelli 3 місяці тому

    Great teacher

  • @flamey18
    @flamey18 12 днів тому

    much love from kenya mqahn

  • @abdgaming1574
    @abdgaming1574 Рік тому

    Best for ever❤❤❤

  • @117ch
    @117ch Рік тому +2

    Hey Bro, many thanks for your content!!
    Could you do a LaTeX tutorial? Would be very happy :)

  • @بسملةخلودبوشويط
    @بسملةخلودبوشويط 2 місяці тому

    Thnks bro, 🙌🖤🥰🥰

  • @vensx
    @vensx 8 місяців тому +2

    Bro explains better without needing an hour

  • @sushmat.k85
    @sushmat.k85 Рік тому

    Hi bro,
    I really liked ur all series
    Need Angular videos

  • @yasotube
    @yasotube Рік тому +1

    Nice 🎉❤

  • @flamey18
    @flamey18 12 днів тому

    God bless u mahn

  • @maciejpogorzelski9574
    @maciejpogorzelski9574 Рік тому

    Thank you very much for what you do!

  • @RandomGuyOnDaFreakingNet
    @RandomGuyOnDaFreakingNet Рік тому

    HE BACK BOIS!

  • @InvinciRD
    @InvinciRD 10 місяців тому

    really helpful video

  • @yusufbadem7223
    @yusufbadem7223 Рік тому

    hey bro can you make a typescript fullcourse video thanks you presiated to all your work

  • @muthuraj4147
    @muthuraj4147 Рік тому

    Bro please do videos on crud operations, Spring, spring boot and Restful APIs

  • @hyperxml
    @hyperxml Рік тому

    You should consider doing a Kotlin, Rust, or Zig series… get some fresh 2000s into mix.

  • @Nazar-ni1kw
    @Nazar-ni1kw Рік тому

    can you make a full course about postgreSQL

  • @CrakedTM
    @CrakedTM Рік тому

    can you please make a full lua course

  • @suyashman7964
    @suyashman7964 Рік тому

    Epic bro

  • @ridajehaan6830
    @ridajehaan6830 7 місяців тому

    tq😃

  • @t.p3325
    @t.p3325 Рік тому

    can you pls make a dart full course videon?

  • @raitaskeen
    @raitaskeen Рік тому

    Bro please make tutorial on Typescript (Ts)

  • @iceman4337
    @iceman4337 Рік тому

    Hey, Bro, what fo you think about Java Spring tutorials?

  • @yashkalia2311
    @yashkalia2311 Рік тому

    so coollll

  • @JDYouTube-r8g
    @JDYouTube-r8g Рік тому

    @BroCodez can you create a tutorial in kotlin

  • @Taril69
    @Taril69 Рік тому

    @broCodez How did you learn all this programming languages?

  • @joni8829_
    @joni8829_ 4 місяці тому

    The background is flickering for the fading, how can I fix that?

  • @graiselin2791
    @graiselin2791 Рік тому

    Bro please make video for react js 🙏🙏

  • @siddharthshankarkarthik8239

    hey bro, csn you pls make a series on pygame?

  • @coolpersonnoway
    @coolpersonnoway 7 місяців тому

    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

  • @omairtech6711
    @omairtech6711 Рік тому

    Why are all these gems unlisted?

  • @anhbinhbadao1106
    @anhbinhbadao1106 4 місяці тому

    pretty cool chad

  • @MalcrosTrigonometry
    @MalcrosTrigonometry Рік тому

    Make a video about flutter

  • @kristijanlazarev
    @kristijanlazarev Рік тому

    Why unlisted?

  • @zamasugokublack-v6k
    @zamasugokublack-v6k Рік тому

    hey did you remove the chapter in your full c# video?

  • @Cet.w1p
    @Cet.w1p Рік тому

    What is your fav teacher?:
    Bro Code
    Bro Code
    Bro Code

  • @forevermovies655
    @forevermovies655 Рік тому

    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?

  • @niranjanvanka376
    @niranjanvanka376 Рік тому

    Bro code can you make reactjs full course 😢😢

  • @heinzhenry2047
    @heinzhenry2047 Рік тому

    How are there comments from 3 months but video has been uploaded 6 days ago?

  • @kratoskratos1246
    @kratoskratos1246 Рік тому +1

    Bro I really need to know one thing. How did you have in-depth knowledge in many programming languages...

    • @INTG0
      @INTG0 Рік тому +1

      He took the heads of other immortals who knew how to program.

  • @mahdmustafa9258
    @mahdmustafa9258 Рік тому +1

    well the C course is 4 hour and python course is 12 hour

  • @lt-_yusf2833
    @lt-_yusf2833 Рік тому

    Please how to crak facebook or tiwter in python please

  • @marvelomologbe8106
    @marvelomologbe8106 2 місяці тому

    Bro you're mistaking what ''to'' and "from" mean . "From" just mean 0% and "to" signifies 100% (the end of the animation)

  • @hardlycoding8544
    @hardlycoding8544 Рік тому

    lmao finished

  • @zahraamadi8733
    @zahraamadi8733 4 місяці тому

    today i've finished this html and css list
    bro, you're the best here!
    i've totally fell in love with this explanation thanks dude!
    🫡🫶