Basic CSS Animation with Transition and Transform

Transition-timing-function

1 min readMar 9, 2019

linear // same speed
ease // starts slow ends slow
ease-in // starts slow ends fast
ease-out // starts fast ends slow
ease-in-out // starts slow ends slow

Transition

/* Initial State */
.box {
 height: 100px;
 width: 100px;
 background-color: red;
 transition: transform 2s /* calls the transform below */
}/* Final State */
.box: hover {
 transform: skewX(20deg)
}

transform: theFunction()
transform: skewX()
transition: theTransitionPropertyWeAreChanging theDurationOfTransition;
Anatomy of a transition:
transition-property
transition-duration
transition-timing-function
transition-delay

Skew()

Skew(20deg, 10deg)
20 degrees on the X-axis
10 degrees on the Y-axis
SkewX(20deg)
SkewY(10deg)

Scale()

Scale(2,2)
width = 200px
height = 200px
Scale(0.5,0.5)
width = 50px
height = 50px
scaleX(1.5) // the width
scaleY(1.5) // the height
scale3d()

Rotate()

Rotate(90deg) // clockwise
Rotate(-90deg) // anti-clockwise
RotateX()
RotateY()
RotateZ()
rotate3d(x, y, z, angle deg)

Translate()

Translate(X-axis, Y-axis)
TranslateX()
TranslateY()
shorthand: translate3d(x-axis, y-axis, z-axis)

Perspective

perspective: 1500px // far
perspective: 500px // close

Also see Motion Design with CSS https://courses.rachelnabors.com/ and references https://codepen.io/rachelnabors/ and lastly https://www.pluralsight.com/courses/motion-design-css