Lesson 12 Final Exam Project

Effects Cheatsheet

Translate()

Potential values, in length, that can be used to translate an object along the X-axis, Y-axis, or Z-axis include:

translate(x,y)

translateX(x)

translateY(y)

translateZ(z)

translate3d(x,y,z)

.translate {
    transform: translate(20px,10px);
}

Rotate()

Potential values, in an angle (deg, rad, turn), that can be rotated around the z-axis (default) or any other stated axis:

rotate(angle)

rotateX(angle)

rotateY(angle)

rotateZ(angle)

rotate3d(x,y,z,angle)

.rotate {
    transform: rotate(45deg);
}

Skew()

Potential values, in an angle (deg, rad, turn), that can be used to skew an element along the given axis by the given angle:

skew(x-angle,y-angle)

skewX(angle)

skewY(angle)

.skew {
    transform: skew(20deg,20deg);
}

Scale()

Potential values, in length, that can be used to scale an object in the x-, y-, and z-direction:

scale(angle)

scaleX(x)

scaleY(y)

scaleZ(z)

scale3d(x,y,z)

.scale {
    transform: scale(.5,1.5);
}

Perspective()

Potential values, in length, that can be used to give a 3D-positioned element some perspective:

perspective(n)

.perspective {
    transform: 
        perspective(4cm) 
        rotateX(-15deg) 
        rotateY(30deg);
}

Matrix()

Potential values, in lengths, that can be used to define a 2D transformation using a matrix of six values, or a 3D transformation using a 4x4 matrix of 16 values:

matrix(n,n,n,n,n,n)

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

.matrix {
    transform: 
        matrix(0.586,0.8,-0.8,0.586,40,30);
}

W3C standards for transforms

Transition-Property

Potential values, of css properties, that can be used to transition an object, typically on hover:

<css-rule(s)>

.transition-prop {
    transition-property: width, height;
}
.transition-prop:hover {
    width: 150%;
    height: 150%;
}

Transition-Duration

Potential values, of time, that can be used to define how long the transition takes from start to end:

<time>

.transition-duration {
    transition-property: font-size;
    transition-duration: 4s;
}
.transition-duration:hover {
    font-size: 2em;
}

Transition-Delay

Potential values, of time, that can be used to define when the start of the transition begins:

<time>

.transition-delay {
    transition-property: width;
    transition-delay: 1s;
}
.transition-delay:hover {
    width: 300%;
}

Transition-Timing-Function

Potential values, of speed curve, that can be used to define the speed values along the transition:

ease

linear

ease-in

ease-out

ease-in-out

step-start

step-end

steps(int,start|end)

cubic-bezier(n,n,n,n)

.transition-timing {
    transition-property: width;
    transition-timing-function: ease;
}
.transition-timing:hover {
    width: 300%;
}

W3C standards for transitions

@keyframes

Potential values, in percent or with the keywords "from" (0%) and "to" (100%), that can be used to dictate when the css style changes during the animation:

<animationname>, from(0%), ...%, to(100%)

@keyframes moveit {
    from {left: 0px; top: 0px;}
    50% {left: 100px; top: -10px;}
    to {left: 200px; top: 30px;}
}

W3C standards for keyframes

Animation

Potential values, of a combination of animation properties, that can be used to define various elements of an animation:

<animation-name>

<animation-duration>

<animation-timing-function>

<animation-delay>

<animation-iteration-count>

<animation-direction>

<animation-fill-mode>

<animation-play-state>

.animation-prop {
    animation: moveit 5s;
}

Animation-Name

Potential values, of a text name defined in @keyframes, that can be used to create an animation:

.animation-name {
    animation-name: moveit;
}

Animation-Duration

Potential values, in time, that can be used to define how long the animation takes from start to finish:

<time>

.animation-duration {
    animation-duration: 5s;
}

Animation-Delay

Potential values, in time, that can be used to define when the animation begins:

<time>

.animation-delay {
    animation-delay: 1s;
}

Animation-Timing-Function

Potential values, in speed curve, that can be used to define the time an animation uses to change from one set of CSS styles to another:

linear

ease

ease-in

ease-out

ease-in-out

step-start

step-end

steps(int,start|end)

cubic-bezier(n,n,n,n)

.animation-timing {
    animation-timing-function: ease-in;
}

Animation-Iteration-Count

Potential values, in number or "infinite", that can be used to specify the number of times an animation plays:

infinite

.animation-iter-count {
    animation-iteration-count: infinite;
}

Animation-Direction

Potential values, in direction, that can be used to define the direction the animation plays:

normal

reverse

alternate

alternate-reverse

.animation-direction {
    animation-direction: reverse;
}

Animation-Fill-Mode

Potential values, in style, that can be used to define the style of the object when the animation is not playing (before it starts, after it ends, or both):

none

forwards

backwards

both

.animation-fill-mode {
    animation-fill-mode: forwards;
}

Animation-Play-State

Potential values, playing or not, that can be used to play or stop the animation:

paused

running

.animation-play-state {
    animation-play-state: paused;
}

W3C standards for animations

Filter

filter:

none blur(<length>) brightness(<number> | <percentage>) contrast(<number> | <percentage>) drop-shadow(<length>{2,3} <color>?) grayscale(<number> | <percentage>) hue-rotate(<angle>) invert(<number> | <percentage>) opacity(<number> | <percentage>) sepia(<number> | <percentage>) saturate(<number> | <percentage>) url(<uri>)

W3C standards for filter

Mix Blend Mode

mix-blend-mode:

normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

W3C standards for mix blend mode

Background Blend Mode

background-blend-mode:

normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

W3C standards for background blend mode

Isolation

isolation:

auto isolate

W3C standards for isolation

Clip Path

clip-path:

none <url> inset([<length> | <percentage>]{1-4}) circle([<length> | <percentage> | keyword] [at <length> | <percentage>]{1,2}?) ellipse([<length> | <percentage>]{2} [at <length> | <percentage>]{1,2}?) polygon(x y, x y, x y[, x y]{1+}?) border-box padding-box content-box margin-box fill-box stroke-box view-box

W3C standards for clip path