Designing, Defining, and Triggering CSS3 Animations without Custom Libraries

Zoom

What are CSS Animations

@keyframes, animation name, and animation-duration are required or the animation will not run.

Animation Properties

@keyframes where you specify CSS rules. Goes from 0% to 100% or "to" and "from".
animation-name: name of animation
animation-duration: time to run in seconds or milliseconds/li>
animation-delay: time to delay start in seconds or milliseconds (negative values allowed)
animation-iteration-count: how many times it runs or infinite
animation-direction: which direction to run in
- normal: forwards
- reverse: backwards
- alternate: forwards then backwards
- alternate-reverse: backwards then forwards
animation-timing-function: how time is run
- Linear: even timing
- Ease: Default. slow start, fast, slow end
- Ease-in: slow start
- Ease-in-out: slow start and slow end
- Ease-out: slow end
- Cubic-bezier(n,n,n,n): See below
animation-fill-mode: specifies style for element when animation is not playing
- none: No styles applied before or after
- forwards: Retain values set by last keyframe
- backwards: Get values set by first keyframe, retain during animation delay
- both: follow rules for forwards and backwards, extending animation properties both directions
animation: shorthand has above items listed together

Multiple Steps

If an animation has the same starting and ending properties, you can comma-separate the 0% and 100% values inside @keyframes:

@keyframes pulse {
    0%, 100% {
        background-color: yellow;
    }
    50% {
        background-color: red;
    }
}

Multiple Animations

You can call multiple animations at once using a comma between each animation shorthand.

.element {
    animation: 
        pulse 3s ease infinite alternate, 
        nudge 5s linear infinite alternate;
}

Amazon Ad Animation

The following code was used to create the Amazon Ad animation. Note that translate and scale do not have a ; between them as they are both using transform.

.verticalAd {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-52%, -50%);
    height: 600px;
    width: 160px;
    opacity: 0;
    animation: popUp 5s 1s ease forwards; 
    }
    
    @keyframes popUp {
    0% {opacity: 1;}
    80% {transform: translate(-52%, -50%) 
        scale(1); opacity: 1;}
    100% {transform: translate(-52%, -50%) 
        scale(0); opacity: 1;}
    }>

Rolling Ball Animation

.ball-container {
    background-color: #90073f;
    height: 142px;
    margin: 40px auto;
    width: 300px;
}
    
.rolling-ball {
    animation: orbit 3s linear infinite 
        alternate;
    background: radial-gradient(
        circle at 50px 50px, #5cabff, #000);
    border: 2px solid #323437;
    border-radius: 50%;
    height: 25px;
    padding: 20px;
    width: 25px;
}
    
@keyframes orbit {
    0% { transform: translate(0px,100px); }
    20% { transform: translate(50px,0px); } 
    40% { transform: translate(100px,100px); } 
    60% { transform: translate(150px,0px); } 
    80% { transform: translate(200px,100px); }
    100% { transform: translate(255px,0px); }
}