CSS Animations

So, why animate?

CSS animations have 3 significant aspects to it:

  • Transform
  • Transition
  • Keyframes

A) TRANSFORM:

  1. Translate
  2. Scale
  3. Rotate
  4. Skew

1. Translate

transform: translateX(100px);    
// Moves the element on the X-axis
transform: translateY(100px);
// Moves the element on the Y-axis
transform: translate(100px, 100px);
// Moves the element on the X-axis and Y-axis respectively
transform: translate(100px);
// Moves the element on the X-axis ONLY

2. Scale

transform: scaleX(3); 
// Scaling along the X-axis
transform: scaleY(0.5);
// Scaling along the Y-axis
transform: scale(3 , 0.5);
transform: scale(3);
// Scaling along both the X-axis and Y-axis

3. Rotate

transform: rotateX(45deg);
// The elements will be rotating into the page along X-axis.
transform: rotateY(45deg);
// The elements will be rotating into the page along Y-axis.
transform: rotateZ(45deg)
// The elements will be rotating into the page along Z-axis.

4. Skew

transform: skewX(45deg); or skew(45deg);
// Along X-axis
transform: skewY(80deg);
// Along Y-axis

Combining transforms

transform: translateX(100px) rotateX(45deg) scaleY(1.5) skewX(45deg)

Adding transforms to events

.element-to-animate:hover {
transform: translateX(100px) rotateX(45deg) scaleY(1.5);
}

B) TRANSITION:

  1. Transition-property

1. Transition-property:

transition-property: background-color;
// Applying transition property to a specific CSS property
transition-property: all;
// Applying a transition to the entire list of CSS properties

2. Transition-duration:

transition-duration: 0.5s;

3. Transition-timing-function:

transition-timing-function: ease;transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

4. Transition-delay:

transition-delay: 0.5s;

Combining transitions

transition: (property) (duration) (transition-timing-function) (transition-delay);

C) KEYFRAMES:

  1. From — To approach
  2. Percentage Approach

1. From-To approach

@keyframes animation_name {
from { }
to { }
}
@keyframes move {
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
}
}
.circle {
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}

2. Percentage approach

@keyframes jump {
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}

• Animation shorthand

.circle {
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
// Can be re-written as
.circle {
animation: move 3s ease-in infinite normal 2s;
}

• Chaining Animations?

.circle {
animation: move 3s ease-in infinite normal 2s,
jump 2s ease 4 alternate reverse;
}

Classifications of Animation Properties:

Thanks for reading! Any comments or feedback are more than welcomed 😊

--

--

--

Front end developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Class Not Found Exception in Java

How you can access IMDb page of any movie through two clicks

The Border/Background Effects of TextView like Instagram in iOS

Amazon Elastic File System (EFS)

Computing ray origin and direction from Model View Projection matrices for raymarching

An introduction to the Domain Name System

Regular Expression in SQL

From Boozehound Bar Manager to Straight-Edge Software Developer — a 2020 story

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samah Gaber

Samah Gaber

Front end developer

More from Medium

Mindbending Christmas Art Created With CSS & JavaScript

CSS Essentials

How to learn HTML and CSS as a Newbie?

Top 3 CSS Tricks