Lesson 7 Project

Back to Menu

Terminology

Animations
Animations define how an element changes over time using keyframes.
Keyframes
Keyframes specify the intermediate steps of an animation sequence.
Transforms
Transforms rotate, scale, skew, or move elements in 2D or 3D space.
Transitions
Transitions animate changes between two property values.
Easing
Easing controls the acceleration pattern of an animation or transition.
Rotation
Rotation turns an element around a fixed point.
Scale
Scale resizes an element horizontally, vertically, or both.
Skew
Skew distorts an element by slanting it along the X or Y axis.
Delay
Delay defines how long to wait before starting a transition or animation.
Transition Timing
Controls how intermediate values are calculated during a transition.
Back to Menu

Transform Properties

Example Code

Rotates an element around a point.

<div class="rotate">Rotate20</div>
.rotate {
    width: 100px;
    height: 80px;
    background-color: var(--main-color-600);
    transform: rotate(20deg);
}
Rotate20

Example Code

Skews an element along the Y-axis.

<div class="skew">Skew20</div>
.skew {
    width: 100px;
    height: 80px;
    background-color: var(--main-color-600);
    transform: skewY(20deg);
}
Skew20

Example Code

Scales an element vertically.

<div class="scale">Scale1.5</div>
.scale {
    width: 100px;
    height: 80px;
    background-color: var(--main-color-600);
    transform: scaleY(1.5);
}
Scale1.5

Example Code

Moves an element horizontally and vertically.

<div class="translate">Translate</div>
.translate {
    width: 100px;
    height: 80px;
    background-color: var(--main-color-600);
    transform: translate(50px, 100px);
}
Translate
Back to Menu

Transition Properties

Example Code

Demonstrates transition delay.

<div class="delay"></div>
.delay {
    width: 60px;
    height: 60px;
    background: var(--main-color-600);
    transition: width 3s;
    transition-delay: 1s;
}

.delay:hover {
    width: 300px;
}
Delay

Example Code

Demonstrates transition duration.

<div class="duration"></div>
.duration {
    width: 100px;
    height: 100px;
    background: var(--main-color-600);
    transition-property: width;
    transition-duration: 5s;
}

.duration:hover {
    width: 300px;
}
Duration

Example Code

Demonstrates transition timing function.

<div class="timing"></div>
.timing {
    width: 100px;
    height: 100px;
    background: var(--main-color-600);
    transition: width 2s;
    transition-timing-function: linear;
}

.timing:hover {
    width: 300px;
}
Timing
Back to Menu

Animation Properties

Example Code

Defines an animation using keyframes.

<div class="anim"></div>
.anim {
    width: 100px;
    height: 100px;
    background: var(--main-color-600);
    position: relative;
    animation: move 5s infinite;
}

@keyframes move {
    from { left: 0px; }
    to { left: 200px; }
}
Animation