Frontend Scrapbook

Notes that make a difference

CSS Animations

By admin

on Wed Sep 16 2020

transition property

.heading {
    color: darkblue;
    font-size: 15px;
    transition: color 0.5s

.heading:hover {
    color: brown;
    font-size: 25px;

//transition: property1 delay, property2 delay;
//transition: all delay;

Customizing transitions

transition-delay: 1s // transition starts after 1s

transition-property: all;
transition-duration: 0.5s;
transition-delay: 1s;
transition-timing-function: linear; // default

transition: all 0.5s linear 1s // shorthand 

transition-timing-function can take different values such as ease, ease-in, ease-out, ease-in-out, etc


First, we define the animation keyframes. we can use ‘from’ and ‘to’ or in percentages. ‘from’ equivalent to 0% and ‘to’ is equivalent to 100%.

@keyframes grow {
    from {width: 100px; height: 100px; background: blue;}
    to {width: 10px; height: 10px; background: red;}

On the element, define animation-* properties

.box {
    width: 50px;
    height: 50px;
    background: red;
    border: 1px solid black;
    animation-name: grow;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite // can be a number
    animation-timing-function: ease;
    animation-direction: normal;
// for direction, we have following values: reverse OR alternate OR alternate-reverse
    animation-fill-mode: both 
// for fill-mode, we have following values: none, forwards, backwards, both. fill-mode sets how a css animation applies styles to its targets before and after execution.
   animation-fill-mode: both 
// in this case, iteration count is 4. so we need fill-mode. if infinite, this property doesn't apply.
   animation: grow 2s ease 1s 4 normal;



.box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
// translate by 25px ( width of element ) left along x-axis and up along y-axis
    position: fixed;
    width: 50px;
    height: 50px;
    background: red;
    border: 1px solid black;
    animation-name: transform;
    animation-duration: 2s;
    animation-iteration-count: infinite;

@keyframes transform {
    100% {transform: translateX(50%) translateY(25%)}
 //along X axis -> move 50% width of element right along X axis and 35% along Y-axis ( towards bottom )

Timing Function

Cubic bezier timing function

We can customize our animation/timing function by using Cubix bezier.

It is two points from 0 to 1 used to define a curve. If >1 is provided, the progression goes over 100% and will bounce back ( shrink ) to 100% or scale of 1.

Progression happens on the y-axis and time on the x-axis. Curve determines the progression over time ( timing function )

cubic-bezier: (x1,y1,x2,y2)