Learn CSS animation in 8 minutes 🎞️

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น • 45

  • @BroCodez
    @BroCodez  3 ปีที่แล้ว +11

    /* --------- style.css --------- */
    #box1{
    width: 250px;
    height: 250px;
    background: red;
    font-size: 225px;
    text-align: center;
    /*
    animation: mySlide;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-duration: 5s;
    */
    animation: 3s linear 0s infinite running mySlide;

    }
    #box1:hover{
    }
    #box1:active{

    }
    @keyframes mySlide{
    from{margin-left: 100%;}
    to{margin-left: 0%;}
    }
    @keyframes myRotate{
    /*100%{transform: rotateX(360deg)}*/
    /*100%{transform: rotateY(360deg)}*/
    100%{transform: rotateZ(360deg)}
    }
    @keyframes myOpacity{
    50%{opacity: 0;}
    }
    @keyframes myScale{
    50%{transform: scale(0.5, 0.5);}
    }
    @keyframes myColorChange{
    0%{background-color: red;}
    20%{background-color: orange;}
    40%{background-color: yellow;}
    60%{background-color: green;}
    80%{background-color: blue;}
    100%{background-color: purple;}
    }

    My first website

    Hi

  • @Remolhunter97
    @Remolhunter97 2 ปีที่แล้ว +16

    Finished your comlete HTML & CSS tutorials, now going for JS :)
    Your Java tutorials & DSA are fire too !

    • @Remolhunter97
      @Remolhunter97 ปีที่แล้ว +1

      @@Series-unlocked i think so, not sure it has been a long time, lot of projects in between. but for sure @brocode has the best tutorials out here

    • @micaelalgarrao6043
      @micaelalgarrao6043 ปีที่แล้ว +2

      ​@@Remolhunter97 u feel confident about your CSS? CSS is hard and cool at the same time lol

    • @Remolhunter97
      @Remolhunter97 ปีที่แล้ว +1

      @@micaelalgarrao6043 try out tailwind css, it's a new approach to css ^^

  • @ArpitKumarSuman
    @ArpitKumarSuman 3 ปีที่แล้ว +6

    The way you explain always inspires me to learn more. Love you Bro💚

  • @aer0449
    @aer0449 3 ปีที่แล้ว +3

    Happy Teacher's Day bro ♥️ from India

  • @NarutoUzumakiDatebayo
    @NarutoUzumakiDatebayo ปีที่แล้ว +2

    YOOOOOOO A BIG W FOR BRO
    TYSM BRO because of you I have completed HTML and CSS.
    now I am going to practice both of them by building some basic projects and then i will move on to JS

  • @MeuTube
    @MeuTube 3 ปีที่แล้ว +1

    Wouhou, just finish HTML and CSS videos, feel like a superhero. Live long Bro. Bro army let's get it. Now time to do some javascript heyheyhey

  • @nothing.ghost4547
    @nothing.ghost4547 3 ปีที่แล้ว +2

    Thank you for all I just finished this two playlist : html and css tutorial it’s very good.

  • @NarutoUzumakiDatebayo
    @NarutoUzumakiDatebayo ปีที่แล้ว +1

    YOOOOO THIS IS THE LAST TUTORIAL LEFT NOW!!!🔥🔥

  • @lamour6139
    @lamour6139 ปีที่แล้ว

    love you man! your videos are life-saving)

  • @7ucky7vn37
    @7ucky7vn37 ปีที่แล้ว

    I think you are the best at explaining code lol

  • @micaelalgarrao6043
    @micaelalgarrao6043 ปีที่แล้ว

    He always explains things very well 👌

  • @HassanRaza-nn5ro
    @HassanRaza-nn5ro 2 ปีที่แล้ว +2

    Hey bro!
    I want more out of css.
    Please create some more videos.

  • @justinbanza4751
    @justinbanza4751 3 ปีที่แล้ว

    Thank you very much for these videos

  • @jamesgrosspietsch4174
    @jamesgrosspietsch4174 ปีที่แล้ว

    Thank you!

  • @irushairusha1991
    @irushairusha1991 2 ปีที่แล้ว

    👌👌👌👌👌👌👌👌👌👌

  • @Codro09
    @Codro09 2 ปีที่แล้ว

    Bro loved this one tooo🥰🥰

  • @lilperkz4499
    @lilperkz4499 2 ปีที่แล้ว +1

    hey bro can u pls bring to this playlist grid and flexbox? I really like how u teach!!

  • @Adrianocas
    @Adrianocas 2 หลายเดือนก่อน

    Hey! Learning a lot from you work, thanks! One question: I'm replicating your steps but the animation won't work. Do you know why?

  • @purpleacecard
    @purpleacecard ปีที่แล้ว

    bro, bro broski, broskido - REALLY real bro

  • @MrLoser-ks2xn
    @MrLoser-ks2xn ปีที่แล้ว

    Thanks!

  • @TheEvertonDias
    @TheEvertonDias ปีที่แล้ว

    Thanks, Bro!

  • @isdabi
    @isdabi ปีที่แล้ว

    big thanks

  • @aditya_asundi
    @aditya_asundi 3 ปีที่แล้ว +1

    Bro, are you fine with facecam videos? Could you do one if you don't mind?

  • @abebrosiczki637
    @abebrosiczki637 2 ปีที่แล้ว

    Thanks bro!

  • @cayden9224
    @cayden9224 3 ปีที่แล้ว +1

    Love your videos bro, keep it up! Also get on discord

    • @BroCodez
      @BroCodez  3 ปีที่แล้ว +2

      I'm too busy making videos for you guys to get on Discord lol

    • @cayden9224
      @cayden9224 3 ปีที่แล้ว

      @@BroCodez Ok, I'm ok with that lol

    • @limbotheboy4951
      @limbotheboy4951 3 ปีที่แล้ว

      @@cayden9224 he has a discord server ?

  • @nj5195
    @nj5195 3 ปีที่แล้ว

    Thank you Bro! (:

  • @AtikWithBuckTeeth
    @AtikWithBuckTeeth ปีที่แล้ว

    i really didnt know that how to use CSS transition on click, I thought without javascript I cant do anything

  • @ianjohansson2940
    @ianjohansson2940 2 ปีที่แล้ว

    can someone help me @keyframes is not working on notepad++ does anyone know what to do. Am I missing a plugin or something "Please Help" thanks

  • @Haileyleah
    @Haileyleah 2 ปีที่แล้ว

    can the animations work for an image which you position?

  • @joshwzr1257
    @joshwzr1257 2 ปีที่แล้ว

    ..Thanks Bro-code

  • @hikkiyt3556
    @hikkiyt3556 3 ปีที่แล้ว

    already watch this on Html and css full course

  • @azatbegenchev8636
    @azatbegenchev8636 3 ปีที่แล้ว

  • @promax1st
    @promax1st 2 ปีที่แล้ว +1

    :)

  • @AdemWodu
    @AdemWodu 4 หลายเดือนก่อน

    Bro

  • @paolobena
    @paolobena 2 ปีที่แล้ว

    Yhx

  • @NINJA45198
    @NINJA45198 ปีที่แล้ว

    E

  • @fyrukmcoo100
    @fyrukmcoo100 3 ปีที่แล้ว

    :((

  • @weamshami6247
    @weamshami6247 ปีที่แล้ว