CIT 261 - Fluency Evidence - CSS3 Effects Triggered by JavaScript

Transform & Transition

CSS
                    
.circle {
    display: inline-block;
    width: 33%;   
    border-radius: 50%;
    height: 40px;
    margin: 30px auto;
    width: 40px;
    background: #60D4C8;
}

.circle.scale {
    transform: scale(2);
    transition: all 300ms;
}

.circle.move {
    transform: translate(2em);
    transition: ease, 300ms;
}

.box {
    display: inline-block;
    margin: 30px auto;
    height: 40px;
    width: 40px;
    background-color: blue;
}

.box.rotate {
    transform: rotate(300deg);
    transition: transform 0.5s ease-out;    
    }
                    
                
JavaScript
                    
function scaleCircle() {
    let circle = document.getElementsByClassName('circle')[0];
    let button = document.getElementById('scaleButton');
    if(button.innerHTML==="Scale") {
        circle.classList.add('scale');
        button.innerHTML="Reset";
    } else {
        circle.classList.remove('scale');
        button.innerHTML="Scale";
    }
}

function rotateBox() {
    let box = document.getElementsByClassName('box')[0];
    let button = document.getElementById('rotateButton');
    if(button.innerHTML==="Rotate") {
        box.classList.add('rotate');
        button.innerHTML="Reset";
    } else {
        box.classList.remove('rotate');
        button.innerHTML="Rotate";
    }
}

function moveCircle() {
    let circle = document.getElementsByClassName('circle')[1];
    let button = document.getElementById('moveButton');
    if(button.innerHTML==="Move") {
        circle.classList.add('move');
        button.innerHTML="Reset";
    } else {
        circle.classList.remove('move');
        button.innerHTML="Move";
    }
}
                    
                

Animation

CSS
                
@keyframes lr-bounce {
    from {left: 0px;}
    to {left: 90%}
}

.bar {
    animation: lr-bounce 2s infinite alternate;
    position: relative;
    border: 2px blue;
    width: 50px;
    height: 20px;
    background: rgb(100,100,255);
}

.bar.paused {
    animation-play-state: paused;
}
                
            
JavaScript
                
function moveBar() {
    let bar = document.getElementsByClassName('bar')[0];
    let button = document.getElementById('barButton');
    if(button.innerHTML==="Pause") {
        bar.classList.add('paused');
        button.innerHTML="Play";
    } else {
        bar.classList.remove('paused');
        button.innerHTML="Pause";
    }
}