SHARE

Hey gang, in this CSS animation tutorial, we’ll take a quick look at CSS transitions. Transitions are like the most basic form of CSS animation you can perform on a web page. They define how an element transitions from one state to the next.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/css-animations-playlist
+ Brackets editor – https://brackets.io/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

============ CSS for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

20 COMMENTS

  1. This video is really helpful. But I have a problem everything when I want to apply the hover effect to my code. Sometimes its work and sometime it doesn't 

    body{
    background-color: lightblue;
    text-align: center;
    }
    .wrapper{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    }
    .circle{
    width: 100px;
    padding: 50px 0;
    line-height: 0;
    margin: 60px auto;
    background: pink;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    }
    .circle: hover{
    background-color: salmon;
    }

    This is my code. The hover effect doesn't work and I don't why.

  2. Brand new to web development. Your channel is a gold mine. I love how subtle changes like adding ' transition: 1s; ' can make a page that much more fluid.

    Liked, subbed and did the little bell thing. Will be up all night trying this stuff out. Thank You!!

  3. Hey,I am Chinese, very like your tutorial.Can you add Chinese subtitles to your tutorial? uh… Your speed is too fast, I can not understand

  4. Also is there a way to initate the transition without using hover? For example as soon as the page loads, 10s delay then the transition occurs without the user pressing or hovering on anything? thanks in advance!

  5. hey is it possible to have two transforms in the hover property and apply the transition to both of them? When I try, the transition effect is only applied to the second transform

  6. hey I am trying to move a label for input type text which is inside the input space to move on top of it when anything if typed pls help

  7. Aloha, I am really enjoying your videos. The code and results are great. One thing I wish I could figure out (I live in Japan, where no English speaking teachers or classrooms are available) is how to do the many events possible using mouse click…on click?. There is a lot on hoover. I wish to rotate a picture revealing another picture on the back when a person clicks on the front picture. Seems to me it ought to be easy. I am making a simple picture multiple choice game. Can it be done, especially without needing to dig deeply into JavaScript?

  8. Thanks a lot for your videos. These are straight to point too good. I am planning to watch almost each video from your channel. In regards to this video, I wanted to know if cubic-bezier is same as timing functions like linear and others..

  9. Thank you again for walking through all these items. What took a two hours in another tutorial took twenty minutes here, and I've got a better grasp. Subscribed and look forward to going through your other videos!

  10. What about tapping on smart devices? Hovering is used on desktop pcs and laptops, which are no where as popular as they used to be!

LEAVE A REPLY

Please enter your comment!
Please enter your name here