CSS Practice with Scrimba

Transition

All done using hover property

Adding Transitions

transition "specific value we want to transition" "time it takes to transition in seconds"

An example of css code is given below

.heading {
color: blue;
font-size: 20px;
transition: color 0.5s;
}

Here if we want target different properties together we can separate properties by comma or all the properties together

transition "specific value" "time in sec", "specific value" "time in sec", "more properties" "time in sec"

transition all "time in sec"

An example of css code is given below

.heading {
color: blue;
font-size: 20px;
//transition: color 0.5s, font-size 1s;
//transition: all 0.5s;
}

Customization transition

Transition Delay This will add a pause for 1s second before the transition occurs.

.heading {
    //...
    transition-delay: 1s;
    //...
}

Separating properties within transitio

.heading {
    //...
    transition-property: color, font-size, all;
    transition-duration: 1s;
    //...
}

Transition timing function

.heading {
    //...
    //transition-timing-function: ease;
    //transition-timing-function: linear;
    //...
}

Transition Shorthand

transition "transition-property" "transition-duration" "transition-timing-function" "transition-delay"

.heading {
    //...
    transition: font-size 0.5s ease-in 1s;
    //...
}

Animation

standalone, not dependent on pseudo classes

setting two things in the parent css block: animation-name : grow; animation-duration : 2s;

.box {
    width: 50px;
    height: 50px;
    background: red;
    border: 1px solid black;
    /*
    below is animation timing
    */
    animation-name: grow;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 3; /* can be infinite */
}
@keyframes "name of the animation" {
    /*
    from {all the properties}
    to {all the properties}
    */

    /* setting up different percentage of growth
    0% {}
    50% {}
    100% {}
    */

    from {width: 100px; height: 200px; background: red}
    to {width: 20px; height: 20px; background: blue}

}

animation function

.box {
    //...
    animation-timing-function: ease;
    animation-direction: alternate-reverse;
    animation-fill-mode: forwards, backwards, both;
    //...
}
@keyframes "name of the animation" {
    /*
    from {all the properties}
    to {all the properties}
    */

    /* setting up different percentage of growth
    0% {}
    50% {}
    100% {}
    */

    from {width: 100px; height: 200px; background: red}
    to {width: 20px; height: 20px; background: blue}

}

shorthand

animation "name" "duration" "timing function" "delay" "iteration-count" "direction"

Introduction to Transforms and Scaling

<>skiping to new

A Link to markdown cheatsheet ME