Week 4:

Transitions



Adding the transition CSS property will set an element property up to be able to animate between its default state and some interaction, such as hover.


.box{
    float:left;
    width: 10%;
    height: 100px;
    background-color: #fff;
    opacity: 0.1;
    transition-property: opacity;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}
.box:hover{
    opacity: 1;
}



Multiple Transitions

.expand{
    width: 20%;
    height: 50px;
    padding: 5%;
    background-color:#333;
    transition-property: width, height, background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 0s;
}
.expand:hover{
    width: 90%;
    height: 200px;
    background-color: #f00;
}


Hover over me.

Resources