CSS Transitions and Animations

There are a lot of cool effects and animations you can do with CSS, and it's actually not too difficult once you know how to do it. For a simple example, try hovering over these boxes:

The CSS code for this is:

.hover-box{
    display: inline-block;

    scale: 1;

    /* This part sets up the transition */
    transition: 2s ease;
    transition-property: scale;
}

.hover-box:hover{
    scale: 2;
}
                

The transition-property property sets which property the transition effects. In this case, it is set to scale, so whenever the scale property changes, it animates between the old and new values for the duration specified in transition, 2 seconds in this case.

The first example used a psuedo-class, but this also works if you add or remove classes in JavaScript:

var btn1 = document.getElementById("btn1")
var box1 = document.getElementById("box1")

btn1.addEventListener("click", function(){
    if (box1.classList.contains("right")){
        box1.classList.remove("right")
    } else {
        box1.classList.add("right")
    }
})
                

You can also make more advanced animations by typing something like this:

@keyframes coolAnimation {
    from{
        rotate: -10deg;
    }

    to{
        rotate: 20deg;
    }
}

#box2{
    animation-name: coolAnimation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
                

You can type all sorts of properties into the from and to blocks, just like any other rule. The properties on #box2 set things about how the animation should play, such as the duration. The animation-name property should be the same name as when you defined the animation, I used coolAnimation for this example.