CSS3 Transitions, Animations, and Transforms

in CSS and Triggering with JavaScript

Zoom

Zoom recording - starts at 13:55

Links

Triggering a Transition with JavaScript

Transitions can be triggered with JavaScript by calling a function that changes a style.

Single Elements

CSS:
#square {
    width: 200px;
    height: 200px;
    background-color: #3c76a6;
    transition: opacity 1s;
}

Javascript:
function fadeOut() {
    var square = 
        document.getElementById("square");
    square.style.opacity = 0;
}

Show List PopUp

My List

CSS:
#list {
background-color: #f9bf91;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 80vh;
border: 1px outset #f9bf91;
margin: auto;
display: none;
}                

JavaScript:
function showList() {
var showPopUp = 
document.getElementById('list');
showPopUp.style.display = "block";
}

function hideList() {
var hidePopUp = 
document.getElementById('list');
hidePopUp.style.display = "none";
}

Multiple Elements

CSS:
#rolling-box {
    width: 200px;
    height: 200px;
    background-color: maroon;
    transform: rotate(0deg);
}   

#rollingBox {
    width: 50px;
    height: 50px;
    background-color: #3c76a6;
    border-radius: 50%;
    transform: rotate(45deg);
} 

JavaScript:
function rollingBox() {
    var changeBox = 
        document.getElementById('rolling-box');
    changeBox.style.transition = "#rolling-box {
        width: 200px;
        height: 200px;
        background-color: maroon;
        transition: "width 3s, height 3s, 
            background-color 3s, border-radius 2s, 
            transform 3s";
        transform: rotate(0deg);
    }

function rollingBoxBack() {
    var changeBox = 
        document.getElementById('rollingBox');
    changeBox.style.transition = "all 2s";
    changeBox.id = "rolling-box";
}

Triggering Animations

Triggering Transforms

Transforms can be triggered by adding or changing the transform property using an onclick attribute.

Box

Perspective Transformation

Back
Front
CSS:
#transform-box {
    height: 200px;
    width: 200px;
    background-color: maroon;
}

JavaScript:
function scaleBox() {
    var scaleBox = 
        document.getElementById('transform-box');
    scaleBox.style.transform = 
        "scale(.5) skewY(45deg)";
}