mohiyaddeen7

Posted on Aug 6, 2023

Tansforms, Transitions and Animations : Elevating User Experiences with CSS Transitions and Animations🚀

#css #beginners #frontend #design

In the ever-evolving landscape of web development, creating captivating user experiences is a paramount goal. Cascading Style Sheets (CSS) offer a range of tools to enhance interactions and engage users. In this article, we'll dive into the realm of CSS Transforms, Transitions, and Animations, uncovering their potential to transform static designs into dynamic and immersive web experiences.

Let's get started🚀

Tranforms
Transitions
Animations

Transforms

It is a CSS property that is used to rotate, scale, move, skew, etc. elements.

2D Methods That are used With the transform property are :

translate
rotate
scale
skew
matrix

translate(x,y) :

This property is used to move an element along the X and/or Y axes within its containing element without affecting the normal flow of the document or the layout of surrounding elements.

Syntax :

.box1{
  tansform: translate(30px,100px);
}

NOTE : translate(x,y): the first value should be offset from the x-axis, and the second value should be offset from the y-axis.

In the above codepen we have created a box with a height of 10vh (viewport height) and a width of 10vw (viewport width). Using the translate property, we have moved the box 30 px from the x-axis (offset from left) and 100 px from the y-axis (offset from top).

Single-value Syntax for translate :

.box1{
  tansform: translateX(30px);
}

/*OR*/

.box1{
  tansform: translateY(100px);
}

/*OR*/

.box1{
  tansform: translateX(30px) translateY(100px); /*This will work same as translate(30px,100px) */
}

For more information on translate property visit :
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

rotate :

The CSS rotate property is used to rotate an element (such as an image, text, or a container) around a specified point or axis. It allows you to change the visual orientation of an element, giving it a rotated appearance.

The rotation is specified in degrees, and positive values rotate the element in a clockwise direction, while negative values rotate it in a counterclockwise direction. The default rotation point is the center of the element, but you can also specify a different point using the "transform-origin" property.

transform-origin property :

The CSS transform-origin property determines the point around which an element is rotated, scaled, or transformed in other ways using the transform property. It allows you to control the pivot point or axis of the transformation, influencing how the element visually changes.

The property takes values that specify the horizontal and vertical offsets from the element's top-left corner, or you can use keywords like center, top, bottom, left, and right to define the origin relative to the element's edges.

NOTE : The transform-origin property must be used with the transform property.

Syntax for rotate :

.box1{
  tansform: rotate(45deg);
}

Syntax for tranform-origin :

.box1{
  transform-origin: top right; 
  tansform: rotate(45deg);
}

In the above codepen, we have rotated the box 45 degrees from the center origin (which is by default) using the rotate property.

Now let us try rotating the box by different origins using the transform-origin property.

You can adjust the transform-origin values to control the pivot point and achieve the desired transformation effect.

NOTE : | transform-origin: x y | The first value should be offset from the x-axis, and the second value should be offset from the y-axis.

For more information on rotate property visit :
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

For more information on transform-origin property visit :https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

scale :

This property is used to change the size of an element, making it appear larger or smaller while maintaining its proportions.

The "scale" property takes one or two values, representing the scaling factor along the horizontal and vertical axes. A single value scales both axes equally, while two values allow you to scale them independently.

Values less than 1 decrease the size (shrink), and values greater than 1 increase the size (enlarge).

Syntax :

.box1{
  tansform: scale(2,0.5);
}

Exercise : Try placing (hovering) your cursor on the arrow image in the above codepen.

See how it changed its size. This was achieved using the "scale" property and the "hover" property.

Single-value Syntax for scale :

.box1{
  tansform: scaleX(2);
}

/*OR*/

.box1{
  tansform: scaleY(0.5);
}

For more information on scale property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

skew :

This property is used to distort the shape of an element by tilting it along the horizontal and/or vertical axes.

The skew property takes one or two angles as values, representing the amount of skewing along the x-axis (horizontal) and y-axis (vertical). Positive angles tilt the element in a certain direction, while negative angles tilt it in the opposite direction.

Syntax :

.box1{
  tansform: skew(45deg, 20deg);
}

In the above codepen, we have skewed "box 2" along the x-axis by 45 degrees.

For more information on skew property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

matrix :

This property takes 6 parameters. With the help of these parameters, we can rotate, scale, move (translate), and skew elements.

Syntax :

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

.box1{
  tansform: matrix(2, 45deg, 12deg, 0.5, 10px, 150px);
}

For more information on matrix property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

3D Methods That are used With Transform property are :

translate3d
rotate3d
perspective

When the translate and rotate properties for the z-axis are set, the perspective property must also be set on the parent element before we can see any effect.

The perspective property determines the distance between the object and the viewer. A smaller value creates a stronger 3D effect, making the object appear closer and more pronounced, while a larger value reduces the perceived 3D effect, making the object seem farther away.

When setting the perspective property for an element, it is the CHILD elements that acquire the perspective view rather than the element itself.

Syntax :

.container{
  perspective:100px;
}
.box1{
  tansform: translateZ(10px) rotateZ(45deg);
}

For more information on perspective property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

For more information on transform property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Now the interesting part starts 😎

Transitions

The CSS transition property is used to create smooth and animated changes in an element's style over a specified duration when a property is modified. It allows you to control the speed and ease of the transition between the element's initial and final states.

The transition property is a powerful tool for creating smoother user experiences and adding visual polish to web interactions.

Transition properties are :

transition-property : name of the property that is to be transitioned
transition-duration : duration of the overall transition 3.transition-timing-function : This is used to define the acceleration and deceleration patterns of a transition animation.
transition-delay : delay in transition

Syntax :

.box1{
  background-color: blue;
}

.box1:hover{
  background-color: blue;
  transition-property: background-color;
  transition-duration: 3s;
  transition-timing-function: ease-in;
  transition-delay: 1s;  
}

Exercise :

Try changing the transition-duration property in the above codepen
Try clearing all the transitions from the box1 element and just running the code with only the hover effect. You will see the changes, but they will not be as smooth when transition is used. so we can achieve smoothness in transitions with transition properties.

IMPORTANT NOTE : Instead of using all the above properties individually, we can use them all in one property, i.e., a shorthand property for the transition property.

tp - transition-property
td - transition-duration
ttf - transition-timing-function
tdy - transition-delay

Syntax :
transition : tp td ttf tdy;

Example for shorthand property of transition property :

.box1{
  background-color:black;
}

.box1:hover{
  background-color:orange;
  transition : background-color 2s ease-in 1s;
}

For more information on transition property visit: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

transition triggers :

Transition triggers in CSS determine when a transition effect should occur on an element. These triggers are events that initiate the transition from one style state to another, creating smooth and visually appealing animations. Common transition triggers include:

:hover -> The transition is triggered when the user hovers the cursor over the element.

:focus -> The transition occurs when the element receives focus.

:focus-within -> The transition occurs when the element or any descendant of it receives focus.

:target -> Applies when the ID of the element matches the fragment of the current URL.

class ADD/Remove -> Adding or removing a specific class from the element triggers the transition. This is often used in combination with JavaScript for dynamic animations.

For more information on transition triggers visit:https://web.dev/learn/css/transitions/#transition-triggers

Animations

CSS animations allow you to create dynamic and visually engaging effects on web elements. They enable smooth and controlled transitions between different styles or states, enhancing the user experience.

To create a CSS animation, you define the animation using the @keyframes rule, which specifies the intermediate steps (keyframes) of the animation. Then, you apply the animation to an element using the animation property, specifying the animation's name, duration, timing function, and other optional settings.

Why use animations when we could do the same thing with transitions?
-> Because while using transition, we can only travel from the start state to the end state. But when we use animations, we can define as many states as we need and change the styles of elements precisely for every state.
And another main difference between these two properties is that for transition properties, a transition trigger is required, but for animations, they don't require any trigger. and also that animations can loop while transitions can't.

animation properties :

animation-name : name of the animation (custom name)
animation-duration : duration of the overall animation 3.animation-timing-function : This is used to define the acceleration and deceleration patterns of a animation.
animation-delay : delay in animation
animation-iteration-count : number of times the animation should run
animation-direction : defines the direction of the animation

values for animation properties :

animation-name : custom name (can be anything you like)
animation-duration : s (second) or ms (milliseconds). 3.animation-timing-function : ease-in, ease-out, ease-in-out, linear(default), etc.
animation-delay : s (second) or ms (milliseconds).
animation-iteration-count : infinite, number.
animation-direction : reverse, alternate, alternate-reverse.

Syntax for animation :

.box1{
  background-color:black;
  animation-name: animatebox1;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-iteration-count: infinite; 
}


@keyframes animatebox1{
  from{
    background-color:black;
  }
  to{
    background-color:orange;
  }
}

In the above codepen, we have created a progress bar using the "animation" property.

Shorthand for animation property :

an - animation-name
ad - animation-duration
atf - animation-timing-function
ad - animation-delay
aic - animation-iteration-count
adc - animation-direction

Syntax :

animation : an ad atf ad aic adc;

Using percentage values to define states in animation :

Using percentage values to define states in CSS animations is a powerful technique that allows you to precisely control an element's appearance and behavior at different points during the animation's progression. By specifying keyframes using percentages, you can create smooth and intricate animations that smoothly transition between various states.

Syntax :

@keyframes animatebox1{
  0%{
    background-color:black;
  }
  20%{
    background-color:green;
  }
  60%{
    background-color:orange;
  }
  80%{
    background-color:blue;
  }
  100%{
    background-color:yellow;
  }
}

Percentage-based keyframes give you fine-grained control over an animation's behavior at specific moments. You can define intermediate states, control properties like opacity and color, and create intricate effects that smoothly transition between different styles.

By utilizing percentage values in your keyframes, you can craft visually appealing animations that enhance your web design and user experience.

For more information on animation property visit:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations

Let's connect on LinkedIn 🚀

✨Embrace the canvas of code and the palette of design. As web developers and designers, we weave innovation and creativity into pixels and pixels into experiences. Together, we craft the digital world, where every line of code and stroke of design is a brushstroke on the canvas of possibility. Let's paint a masterpiece of the web, one pixel at a time.🎨💻🌐✨

See you next time for more amazing guides. Until then, stay tuned.

Happy coding✌🏻

Please don't hesitate to ask doubts in the comments section—I'll be sure to respond promptly. Your inquiries are greatly welcomed and will receive a swift and thorough reply.❤️