DEV Community: Stanley

CSS TRANSITIONS

Stanley — Thu, 10 Aug 2023 15:44:00 +0000

OUTLINE
Here is a comprehensive outline for a CSS transition tutorial:

Introduction to CSS Transitions:
- Definition of CSS transitions
- How CSS transitions work
- Examples of CSS transitions
Properties of CSS Transitions:
- transition-property: specifies the name or names of the CSS properties to which transitions should be applied
- transition-duration: specifies the duration over which transitions should occur
- transition-timing-function: specifies a function to define how intermediate values for properties are computed
- transition-delay: specifies a delay (in seconds) for the transition effect
Using CSS Transitions:
- How to create a transition effect
- How to specify the speed curve of the transition
- How to delay the transition effect
- How to change several property values
Browser Support for Transitions:
- Overview of browser support for CSS transitions
- How to ensure cross-browser compatibility
Advanced Topics:
- Using cubic-bezier functions to define custom easing functions
- Combining CSS transitions with other CSS techniques, such as transforms and animations
Conclusion and Further Resources:
- Summary of key points
- Links to further resources for learning about CSS transitions

Introduction to CSS Transitions

Definition of CSS transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time¹. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized¹.

How CSS transitions work
CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining an easing function, e.g., linearly or quick at the beginning, slow at the end)¹. The Web author can define which property has to be animated and in which way. This allows the creation of complex transitions. However, some properties are not animatable as it doesn't make sense to animate them¹.

Examples of CSS transitions
Here are some examples of CSS transitions:

Simple example: A div element with a specified transition effect for the width property, with a duration of 2 seconds. The transition effect will start when the specified CSS property (width) changes value.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Multiple animated properties example: A div element with a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}

Using transitions when highlighting menus: A common use of CSS is to highlight items in a menu as the user hovers over them. This can be achieved using CSS transitions.

ul li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background-color: #eee;
    cursor: pointer;
    transition: all .2s ease-in-out; 
}

ul li:hover {
    background-color: #ddd;
    transform: scale(1.3);
}

Properties of CSS Transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time¹. The transition is the combination of four properties which are listed below:

transition-property: It specifies the CSS properties to which a transition effect should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual². For example, if you want to apply a transition effect to the width property of an element, you can specify it like this:

div {
  transition-property: width;
}

transition-duration: It specifies the length of time a transition animation should take to complete. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time². For example, if you want the width transition to take 2 seconds, you can specify it like this:

div {
  transition-duration: 2s;
}

transition-timing-function: It specifies a function to define how intermediate values for properties are computed. Easing functions determine how intermediate values of the transition are calculated². For example, if you want the width transition to have an ease-in-out timing function, you can specify it like this:

div {
  transition-timing-function: ease-in-out;
}

transition-delay: It defines how long to wait between the time a property is changed and the transition actually begins². For example, if you want the width transition to start after a delay of 1 second, you can specify it like this:

div {
  transition-delay: 1s;
}

All these properties can be combined into one shorthand property – transition. The syntax is:

div {
  transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
}

For example, if you want to apply a transition effect to the width property of an element, with a duration of 2 seconds, an ease-in-out timing function, and a delay of 1 second, you can specify it like this:

div {
  transition: width 2s ease-in-out 1s;
}

Using CSS Transitions

How to create a transition effect
To create a transition effect, you must specify two things: the CSS property you want to add an effect to and the duration of the effect³. For example, if you want to apply a transition effect to the width property of an element, with a duration of 2 seconds, you can specify it like this:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

How to specify the speed curve of the transition
The transition-timing-function property specifies the speed curve of the transition effect. This property can have several values, including ease, linear, ease-in, ease-out, and ease-in-out³. For example, if you want the width transition to have an ease-in-out timing function, you can specify it like this:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s ease-in-out;
}

div:hover {
  width: 300px;
}

How to delay the transition effect
The transition-delay property specifies a delay (in seconds) for the transition effect[^10^]. For example, if you want the width transition to start after a delay of 1 second, you can specify it like this:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s ease-in-out;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}

How to change several property values
You can change several property values at once by specifying multiple properties in the transition shorthand property. For example, if you want to apply a transition effect to both the width and height properties of an element, with a duration of 2 seconds for the width and 4 seconds for the height, you can specify it like this:

div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 4s;
}

div:hover {
    width:300px;
    height:300px;
}

Browser Support for Transitions

Overview of browser support for CSS transitions
CSS transitions are widely supported in modern browsers. According to Can I use, CSS transitions are supported by 97.4% of global users¹. This includes support in all major browsers such as Chrome, Firefox, Safari, Edge, and Opera¹. However, it is important to note that older versions of some browsers may require vendor prefixes to use CSS transitions. For example, older versions of Chrome and Safari may require the -webkit- prefix³.

How to ensure cross-browser compatibility
To ensure cross-browser compatibility with CSS transitions, you can follow these steps:

Determine your target browsers: It is important to determine which browsers your target audience is likely to use. This will help you focus your testing efforts on the most relevant browsers⁵.
Use vendor prefixes: Vendor prefixes are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers. By using vendor prefixes, developers can use new CSS features in the browsers that support them, instead of waiting for all browsers to catch up. For example, if you need to support older versions of Chrome and Safari, you may need to use the -webkit- prefix for the transition property¹.

Here is an example of how to use vendor prefixes for the transition property:

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* For older versions of Chrome and Safari */
  transition: width 2s;
}

div:hover {
  width: 300px;
}

In this example, we use the -webkit- prefix for the transition property to ensure that the transition effect works in older versions of Chrome and Safari. We also include the unprefixed version of the transition property to ensure that the transition effect works in other browsers that support CSS transitions.

Test on multiple browsers: It is important to test your website on multiple browsers to ensure that the transitions work as expected. You can use tools such as LambdaTest or BrowserStack to test your website on a range of different browsers and devices.
Provide fallbacks: In case some users are using a browser that does not support CSS transitions, it is a good idea to provide fallbacks. For example, you can use JavaScript animations as a fallback for browsers that do not support CSS transitions.

Advanced Topics

Using cubic-bezier functions to define custom easing functions Cubic-BezieBeziertions are a powerful tool for creating custom easing functions in CSS transitions. These functions allow you to define the speed curve of a transition, giving you precise control over how the animation progresses over time.

A cubic-bezier function is defined by four values, which represent the x and y coordinates of two control points on a cubic bezier curve. The first and last points of the curve are fixed at (0, 0) and (1, 1), respectively. By adjusting the position of the two control points, you can create a wide variety of easing functions.

Here are some examples of how to use cubic-bezier functions in CSS transitions:

Example 1: Bounce effect

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

div:hover {
  width: 300px;
}

In this example, we use a cubic-bezier function to create a bounce effect when the width of the div element changes. The transition starts quickly, slows down in the middle, and then speeds up again towards the end.

Example 2: Elastic effect

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 2s cubic-bezier(0.7, -0.75, 0.3, 1.75);
}

div:hover {
  width: 300px;
}

In this example, we use a cubic-bezier function to create an elastic effect when the width of the div element changes. The transition starts slowly, speeds up in the middle, and then overshoots its target before settling back to its final value.

Example 3: Custom ease-in-out effect

div {
    width:100px;
    height:100px;
    background-color:red;
    transition: all 2s cubic-bezier(0.86,0,0.07,1);
}

div:hover {
    width:300px;
}

In this example we use a cubic-bezier function to create a custom ease-in-out effect when the width of the div element changes. The transition starts slowly and ends slowly with a fast change in between.

These are just a few examples of how you can use cubic-bezier functions to create custom easing functions in CSS transitions. By adjusting the values of the cubic-bezier function, you can create an almost infinite variety of easing effects to suit your needs.

Combining CSS transitions with other CSS techniques, such as transforms and animations

Combining CSS transitions with other CSS techniques, such as transforms and animations, can create truly immersive and engaging web experiences. Transforms allow you to modify an element's position, rotation, scale, and other properties, while transitions enable you to animate those changes smoothly over a specified duration. Here are some examples of how to combine CSS transitions with other CSS techniques:

Example 1: Rotating an element continuously

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

In this example, we use a CSS animation to continuously rotate a div element. The animation property specifies the name of the animation (rotate), the duration of the animation (4s), the timing function (linear), and the number of times the animation should repeat (infinite). The @keyframes rule defines the start and end states of the animation, with the transform property being used to specify the rotation.

Example 2: Creating a hover effect with a 3D perspective

div {
    width:200px;
    height:200px;
    margin:50px;
    background-color:red;
    transition: transform 1s;
    transform-style: preserve-3d;
}

div:hover {
    transform: perspective(500px) rotateY(180deg);
}

In this example, we use a CSS transition to create a hover effect with a 3D perspective. When the user hovers over the div element, it rotates around its Y-axis, giving the impression of a 3D flip. The transition property specifies that the transform property should be animated over a duration of 1s. The transform-style property is set to preserve-3d to enable 3D transformations. On hover, the transform property is updated to specify a perspective and a rotation.

Example 3: Creating a card flip animation

.container {
    width:200px;
    height:260px;
    position:relative;
    border:1px solid #ccc;
    perspective:800px;
}

.card {
    width:100%;
    height:100%;
    position:absolute;
    transform-style:preserve-3d;
    transition:transform 1s;
}

.card:hover {
    transform:rotateY(180deg);
}

.front,.back {
    width:100%;
    height:100%;
    position:absolute;
    backface-visibility:hidden;
}

.front {
    background-color:red;
}

.back {
    background-color:green;
    transform:rotateY(180deg);
}

In this example, we use a CSS transition to create a card flip animation. The .container element has a perspective property set to give the impression of depth. The .card element has a transition property set to animate changes to the transform property over a duration of 1s. The .front and .back elements represent the front and back of the card, respectively. When the user hovers over the .card element, its transform property is updated to rotate it around its Y-axis, giving the impression of a card flip.

Here are some more examples of combining CSS transitions with other CSS techniques:

Example 4: Creating a smooth scrolling effect

html {
  scroll-behavior: smooth;
}

In this example, we use the scroll-behavior property to create a smooth scrolling effect when the user clicks on an anchor link. The scroll-behavior property specifies whether the scrolling should be smooth or instant. By setting the value to smooth, the browser will automatically animate the scrolling when the user clicks on an anchor link.

Example 5: Creating a fade-in effect

.fade {
  opacity: 0;
  transition: opacity 2s;
}

.fade:hover {
  opacity: 1;
}

In this example, we use a CSS transition to create a fade-in effect when the user hovers over an element. The transition property specifies that changes to the opacity property should be animated over a duration of 2s. When the user hovers over the element, its opacity is updated from 0 to 1, creating a smooth fade-in effect.

Example 6: Creating a slide-in effect

.slide {
  position: relative;
  left: -300px;
  transition: left 2s;
}

.slide:hover {
  left: 0;
}

In this example, we use a CSS transition to create a slide-in effect when the user hovers over an element. The transition property specifies that changes to the left property should be animated over a duration of 2s. When the user hovers over the element, its left property is updated from -300px to 0, creating a smooth slide-in effect.

Summary of key points

CSS transitions provide a way to control animation speed when changing CSS properties.
The transition is the combination of four properties: transition-property, transition-duration, transition-timing-function, and transition-delay.
You can create a wide variety of transition effects by combining these properties in different ways.
CSS transitions are widely supported in modern browsers, but you may need to use vendor prefixes to ensure cross-browser compatibility.
You can combine CSS transitions with other CSS techniques, such as transforms and animations, to create truly immersive and engaging web experiences.

Links to further resources for learning about CSS transitions

(1) Using CSS transitions - CSS: Cascading Style Sheets | MDN - MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions.
(2) CSS Transitions - W3Schools. https://www.w3schools.com/css/css3_transitions.asp.
(3) CSS transitions - CSS: Cascading Style Sheets | MDN - MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions.
(4) CSS Transitions and Transforms for Beginners - thoughtbot. https://thoughtbot.com/blog/transitions-and-transforms.
(5) transition - CSS: Cascading Style Sheets | MDN - MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/transition.
(6) CSS Transition Property | How does Transition Property Work in CSS - EDUCBA. https://www.educba.com/css-transition-property/.
(7) CSS Transitions - GeeksforGeeks. https://www.geeksforgeeks.org/css-transitions/.
(8) CSS Transition: Cheat Sheet & Examples for 2023 - CatsWhoCode. https://catswhocode.com/css-transition/.

CSS TRANSFORM

Stanley — Thu, 10 Aug 2023 15:21:24 +0000

The CSS transform property allows you to apply geometric transformations to an element, such as rotating, scaling, skewing, or translating it. Here is a list of all the CSS transform functions along with examples:

matrix(): The matrix() function describes a homogeneous 2D transformation matrix. It takes six values, representing the elements of a 2x3 matrix. Here is an example that shows how to use the matrix() function to scale and skew an element:

.example {
  transform: matrix(1.5, 0.2, 0.3, 1, 0, 0);
}

matrix3d(): The matrix3d() function describes a 3D transformation as a 4x4 homogeneous matrix. It takes sixteen values, representing the elements of a 4x4 matrix. Here is an example that shows how to use the matrix3d() function to rotate and scale an element in 3D space:

.example {
  transform: matrix3d(1, 0, 0, 0,
                      0, 1, 0, 0,
                      0, 0, 1, 0,
                      0, 0, -100, 1);
}

perspective(): The perspective() function sets the distance between the user and the z=0 plane. It takes one value, representing the distance in pixels. Here is an example that shows how to use the perspective() function to create a perspective effect on an element:

.example {
    transform: perspective(500px) rotateY(45deg);
}

rotate(): The rotate() function rotates an element around a fixed point on the 2D plane. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotate() function to rotate an element by 45 degrees:

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

rotate3d(): The rotate3d() function rotates an element around a fixed axis in 3D space. It takes four values: the x-, y-, and z-coordinates of the axis of rotation followed by the angle of rotation in degrees or radians. Here is an example that shows how to use the rotate3d() function to rotate an element around a fixed axis in 3D space:

.example {
    transform: rotate3d(1,1,1,-45deg);
}

rotateX(): The rotateX() function rotates an element around the horizontal axis. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotateX() function to rotate an element around the horizontal axis:

.example {
    transform: rotateX(45deg);
}

rotateY(): The rotateY() function rotates an element around the vertical axis. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotateY() function to rotate an element around the vertical axis:

.example {
    transform: rotateY(45deg);
}

rotateZ(): The rotateZ() function rotates an element around the z-axis. It takes one value, representing the angle of rotation in degrees or radians. Here is an example that shows how to use the rotateZ() function to rotate an element around the z-axis:

.example {
    transform: rotateZ(45deg);
}

scale(): The scale() function scales an element up or down on the 2D plane. It takes one or two values: if one value is provided, it specifies a uniform scaling factor for both dimensions; if two values are provided, they specify separate scaling factors for the x- and y-dimensions respectively. Here is an example that shows how to use the scale() function to increase the size of an element by a factor of two:

.example {
    transform: scale(2);
}

scale3d(): The scale3d() function scales an element up or down in 3D space. It takes three values: separate scaling factors for each dimension (x-, y-, and z-dimensions). Here is an example that shows how to use the <EUGPSCoordinates> function to scale an element in all three dimensions:

.example {
    transform: scale3d(2,.5,.5);
}

scaleX(): The <EUGPSCoordinates> function scales an element up or down horizontally (along its x-axis). It takes one value: a scaling factor for its x-dimension. Here is an example that shows how to use the scaleX() function to scale an element horizontally:

.example {
    transform: scaleX(2);
}

scaleY(): The scaleY() function scales an element up or down vertically (along its y-axis). It takes one value: a scaling factor for its y-dimension. Here is an example that shows how to use the scaleY() function to scale an element vertically:

.example {
    transform: scaleY(2);
}

scaleZ(): The scaleZ() function scales an element up or down along the z-axis. It takes one value: a scaling factor for its z-dimension. Here is an example that shows how to use the scaleZ() function to scale an element along the z-axis:

.example {
    transform: scaleZ(2);
}

skew(): The skew() function skews an element on the 2D plane. It takes one or two values: if one value is provided, it specifies a skew along the x-axis; if two values are provided, they specify separate skews along the x- and y-axes respectively. Here is an example that shows how to use the skew() function to skew an element by 30 degrees along the X-axis and 20 degrees along the Y-axis:

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

skewX(): The skewX() function skews an element in the horizontal direction (along its x-axis). It takes one value, representing the angle of skew in degrees or radians. Here is an example that shows how to use the skewX() function to skew an element in the horizontal direction:

.example {
    transform: skewX(30deg);
}

skewY(): The skewY() function skews an element in the vertical direction (along its y-axis). It takes one value, representing the angle of skew in degrees or radians. Here is an example that shows how to use the skewY() function to skew an element in the vertical direction:

.example {
    transform: skewY(30deg);
}

translate(): The translate() function moves an element on the 2D plane. It takes one or two values: if one value is provided, it specifies a translation along the x-axis; if two values are provided, they specify separate translations along the x- and y-axes respectively. Here is an example that shows how to use the translate() function to move an element 50 pixels to the right and 100 pixels down:

.example {
    transform: translate(50px, 100px);
}

translate3d(): The translate3d() function moves an element in 3D space. It takes three values: separate translations for each dimension (x-, y-, and z-dimensions). Here is an example that shows how to use the <EUGPSCoordinates> function to move an element in all three dimensions:

.example {
    transform: translate3d(50px,100px,10px);
}

translateX(): The <EUGPSCoordinates> function moves an element horizontally (along its x-axis). It takes one value: a translation for its x-dimension. Here is an example that shows how to use the <EUGPSCoordinates> function to move an element horizontally:

.example {
    transform: translateX(50px);
}

translateY(): The <EUGPSCoordinates> function moves an element vertically (along its y-axis). It takes one value: a translation for its y-dimension. Here is an example that shows how to use the <EUGPSCoordinates> function to move an element vertically:

.example {
    transform: translateY(100px);
}

translateZ(): The <EUGPSCoordinates> function moves an element along the z-axis. It takes one value: a translation for its z-dimension. Here is an example that shows how to use the <EUGPSCoordinates> function to move an element along the z-axis:

.example {
    transform: translateZ(10px);
}

These examples demonstrate how you can use each of these CSS transform functions to apply geometric transformations to elements on your web pages.

(1) transform - CSS: Cascading Style Sheets | MDN - MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/transform.
(2) - CSS: Cascading Style Sheets | MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function.
(3) CSS Functions - Quackit Tutorials. https://www.quackit.com/css/functions/.
(4) CSS Transitions and Transforms for Beginners - thoughtbot. https://thoughtbot.com/blog/transitions-and-transforms.

CSS ANIMATION

Stanley — Thu, 10 Aug 2023 14:35:15 +0000

OUTLINE:

Here is a comprehensive outline for a tutorial on CSS animations:

Introduction to CSS animations - Explanation of what CSS animations are and how they can be used to animate transitions from one CSS style configuration to another.
Components of CSS animations - Overview of the two components of CSS animations: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
Advantages of CSS animations - Discussion of the key advantages of using CSS animations over traditional script-driven animation techniques, including ease of use, performance, and efficiency.
Configuring an animation - Detailed explanation of how to create a CSS animation sequence by styling the element you want to animate with the animation property or its sub-properties, including timing, duration, and other details.
Animation sub-properties - In-depth exploration of the sub-properties of the animation property, including animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function.
Defining the animation sequence using keyframes - Step-by-step guide to defining the appearance of an animation by establishing one or more keyframes using the @keyframes at-rule, including how to use percentages to indicate the time during the animation sequence at which keyframes take place.
Examples and interactive demos - Hands-on practice with creating and configuring CSS animations using examples and interactive demos.

Introduction to CSS animations

CSS animations are a powerful tool for creating smooth, engaging animations on web pages. They allow you to animate transitions from one CSS style configuration to another, providing a way to create complex, interactive effects with just a few lines of code.

At its core, a CSS animation is made up of two parts: a style describing the animation, and a set of keyframes that indicate the start and end states of the animation's style, as well as any intermediate waypoints. By defining these keyframes, you can create animations that smoothly transition between different styles, creating engaging visual effects that can enhance the user experience on your website.

One of the key advantages of using CSS animations over traditional script-driven animation techniques is their ease of use. With CSS animations, you can create complex animations with just a few lines of code, without having to worry about the intricacies of JavaScript or other scripting languages. Additionally, CSS animations are typically more performant and efficient than script-driven animations, making them a great choice for creating smooth, responsive animations on your website.

CSS animations are also highly customizable and flexible. You can use the various sub-properties of the animation property to control the timing, duration, and other details of your animations. This allows you to create animations that are tailored to your specific needs and requirements.

Overall, CSS animations are a powerful tool for creating engaging, interactive effects on your website. By understanding how they work and how to use them effectively, you can create complex animations that will enhance the user experience and make your website stand out from the crowd.

Components of CSS animations

CSS animations are made up of two main components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

The first component, the style describing the CSS animation, is defined using the animation property or its sub-properties. This property allows you to specify the details of the animation, such as its duration, timing function, and delay. You can also use the sub-properties of the animation property to control these details individually.

The second component, the set of keyframes, is defined using the @keyframes at-rule. This rule allows you to specify the start and end states of the animation's style, as well as any intermediate waypoints. You can use percentages to indicate the time during the animation sequence at which each keyframe takes place.

By combining these two components, you can create complex animations that smoothly transition between different styles. For example, you could use keyframes to define an animation that changes an element's background color from red to blue over a period of 2 seconds. Then, by applying this animation to an element using the animation property, you could create a smooth transition between these two states.

Overall, understanding the two components of CSS animations - the style describing the animation and the set of keyframes - is essential for creating effective animations on your website.

Advantages of CSS animations

CSS animations have several key advantages over traditional script-driven animation techniques. Some of these advantages include:

Ease of use: CSS animations are relatively easy to use and require less coding than script-driven animations. With just a few lines of code, you can create complex animations that would be much more difficult to achieve using JavaScript or other scripting languages.
Performance: CSS animations are typically more performant than script-driven animations. This is because the browser can optimize the rendering of CSS animations, making them run more smoothly and efficiently.
Efficiency: CSS animations are also more efficient than script-driven animations. Since they are handled by the browser's rendering engine, they can take advantage of hardware acceleration and other performance optimizations that are not available to script-driven animations.

These are just a few of the many advantages of using CSS animations. By using this powerful tool, you can create engaging, interactive effects on your website with ease and efficiency.

Configuring an animation
Configuring a CSS animation involves styling the element you want to animate with the animation property or its sub-properties. This allows you to specify the details of the animation, such as its timing, duration, and other details.

To create a CSS animation sequence, you first need to define the animation using the @keyframes at-rule. This rule allows you to specify the start and end states of the animation's style, as well as any intermediate waypoints. You can use percentages to indicate the time during the animation sequence at which each keyframe takes place.

Once you have defined your keyframes, you can apply the animation to an element by styling it with the animation property. This property is a shorthand property that combines several sub-properties into a single declaration. These sub-properties include animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Each of these sub-properties allows you to control a specific aspect of the animation. For example, the animation-duration property specifies the length of time that an animation should take to complete one cycle, while the animation-timing-function property specifies the pacing of the animation.

By using these sub-properties, you can create complex animations that are tailored to your specific needs and requirements. You can control the timing, duration, and other details of your animations to create engaging visual effects that enhance the user experience on your website.

Overall, configuring a CSS animation involves defining keyframes using the @keyframes at-rule and then applying the animation to an element using the animation property or its sub-properties. By understanding how to use these tools effectively, you can create complex animations that smoothly transition between different styles.

*Animation sub-properties *

The animation property in CSS is a shorthand property that combines several sub-properties into a single declaration. These sub-properties allow you to control various aspects of the animation, including its timing, duration, and other details. Here is an in-depth exploration of the sub-properties of the animation property:

animation-delay: This property specifies the amount of time to wait from the time the animation is applied to the element before the animation begins. This property can take a value specified in seconds or milliseconds. For example, animation-delay: 2s specifies a delay of 2 seconds, while animation-delay: 2000ms specifies a delay of 2000 milliseconds (equivalent to 2 seconds). This example shows how to use the animation-delay property to delay the start of an animation by 2 seconds:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
  animation-delay: 2s;
}

animation-direction: This property specifies whether the animation should play forwards, backwards, or alternate between playing forwards and backwards. This property can take one of four values: normal, reverse, alternate, or alternate-reverse. The normal value specifies that the animation should play forwards, while the reverse value specifies that it should play backwards. The alternate value specifies that the animation should alternate between playing forwards and backwards, while the alternate-reverse value specifies that it should alternate between playing backwards and forwards.

This example shows how to use the animation-direction property to make an animation alternate between playing forwards and backwards:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
  animation-direction: alternate;
}

animation-duration: This property specifies the length of time that an animation should take to complete one cycle. This property can take a value specified in seconds or milliseconds. For example, animation-duration: 4s specifies a duration of 4 seconds, while animation-duration: 4000ms specifies a duration of 4000 milliseconds (equivalent to 4 seconds).

This example shows how to use the animation-duration property to specify that an animation should take 4 seconds to complete one cycle:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
}

animation-fill-mode: This property specifies how the element should be styled before and after the animation is executed. This property can take one of four values: none, forwards, backwards, or both. The none value specifies that the element should not retain any styles applied by the animation before or after it is executed. The forwards value specifies that the element should retain the style defined by the final keyframe after the animation has completed. The backwards value specifies that the element should retain the style defined by the first keyframe before the animation begins. The both value specifies that the element should retain both the style defined by the first keyframe before the animation begins and the style defined by the final keyframe after it has completed.

This example shows how to use the animation-fill-mode property to specify that an element should retain its final style after the animation has completed:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

animation-iteration-count: This property specifies the number of times the animation should repeat. This property can take a positive integer value or the keyword infinite. A positive integer value specifies the number of times the animation should repeat, while the infinite keyword specifies that it should repeat indefinitely.

This example shows how to use the animation-iteration-count property to specify that an animation should repeat 3 times:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

animation-name: This property specifies the name of the @keyframes at-rule that defines the keyframes for the animation.

This example shows how to use the animation-name property to specify the name of the @keyframes at-rule that defines the keyframes for an animation:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
}

@keyframes example-animation {
  from { background-color: red; }
  to { background-color: blue; }
}

animation-play-state: This property can take one of two values: running or paused. The running value specifies that the animation is currently running, while the paused value specifies that it is currently paused.

This example shows how to use the animation-play-state property to pause and resume an animation:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
}

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

animation-timing-function: The animation-timing-function property in CSS specifies how intermediate property values are calculated for each keyframe during the animation. This property can take one of several predefined keyword values, such as linear, ease, ease-in, ease-out, and ease-in-out.
linear: The linear value specifies that the animation should progress at a constant pace from start to finish. This means that the intermediate property values are calculated using a linear function, resulting in a smooth and steady animation.
ease: The ease value specifies that the animation should start slowly, accelerate in the middle, and then slow down again at the end. This creates a smooth and natural-looking animation that mimics the way objects move in the real world.
ease-in: The ease-in value specifies that the animation should start slowly and then gradually accelerate. This creates an animation that starts off gently and then picks up speed as it progresses.
ease-out: The ease-out value specifies that the animation should start quickly and then gradually decelerate. This creates an animation that starts off fast and then slows down as it reaches its end.
ease-in-out: The ease-in-out value specifies that the animation should start slowly, accelerate in the middle, and then slow down again at the end. This creates a smooth and natural-looking animation that is similar to the ease value, but with more pronounced acceleration and deceleration.

This example shows how to use the animation-timing-function property to specify that an animation should use the ease-in-out timing function:

.example {
  animation-name: example-animation;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
}

In addition to these predefined keyword values, you can also use a cubic-bezier function or a step function to specify a custom timing function for your animation. A cubic-bezier function allows you to define your own curve for calculating intermediate property values, while a step function allows you to create animations with discrete steps.

Cubic-bezier function: The cubic-bezier function is a CSS timing function that allows you to create custom easing effects for animations and transitions. It is used with the animation-timing-function and transition-timing-function properties to specify how intermediate property values are calculated for each keyframe during the animation or transition.

A cubic-bezier curve is defined by four points: P0, P1, P2, and P3. In CSS, P0 and P3 are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, while P3 is (1, 1) and represents the final time and the final state. The cubic-bezier function takes four arguments that represent the x and y coordinates of points P1 and P2, respectively. These points control the shape of the curve, allowing you to create custom easing effects.

Here is an example that demonstrates how to use the cubic-bezier function to create a custom easing effect for a transition:

.example {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

.example:hover {
  width: 300px;
}

In this example, we use the cubic-bezier function to specify a custom timing function for the transition property. The four arguments passed to the cubic-bezier function represent the x and y coordinates of points P1 and P2, respectively. These points control the shape of the curve, creating a custom easing effect for the transition.

When you hover over the element with class .example, its width will transition from 100px to 300px over a period of 2 seconds. The transition will use the custom easing effect specified by the cubic-bezier function.

Animation Shorthand Property
The animation shorthand property in CSS is used to specify multiple animation properties at once. It combines several sub-properties into a single declaration, allowing you to specify the details of an animation in a more concise and readable manner.

Here is the syntax for the animation shorthand property:

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Each of these sub-properties can be specified in any order, and any sub-properties that are not specified will take on their default values.

Here are some examples that demonstrate how to use the animation shorthand property:

Specifying multiple animation properties: This example shows how to use the animation shorthand property to specify multiple animation properties at once:

.example {
  animation: example-animation 2s ease-in-out 1s infinite alternate;
}

In this example, we use the animation shorthand property to specify the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction properties all at once. The animation will have a name of example-animation, a duration of 2 seconds, an easing function of ease-in-out, a delay of 1 second, an iteration count of infinite, and a direction of alternate.

Omitting unspecified properties: This example shows how to omit unspecified properties when using the animation shorthand property:

.example {
  animation: example-animation 2s;
}

In this example, we only specify the animation-name and animation-duration properties using the animation shorthand property. All other sub-properties will take on their default values.

Using multiple animations: This example shows how to use the animation shorthand property to specify multiple animations for a single element:

.example {
  animation: example-animation-1 2s, example-animation-2 4s;
}

In this example, we use the animation shorthand property to specify two animations for the element with class .example. The first animation has a name of example-animation-1 and a duration of 2 seconds, while the second animation has a name of example-animation-2 and a duration of 4 seconds.

AnimationEvent

The AnimationEvent interface represents events providing information related to animations. It is part of the Web APIs and is used in conjunction with CSS animations. The AnimationEvent object has several properties that provide information about the animation, such as the animationName property, which contains the value of the animation-name that generated the animation, and the elapsedTime property, which gives the amount of time the animation has been running when the event fired.

Here is a list of the properties of the AnimationEvent interface:

animationName: This property returns a DOMString containing the value of the animation-name that generated the animation.
elapsedTime: This property returns a float giving the amount of time the animation has been running, in seconds, when the event fired. This value is not affected by the animation-play-state or the animation-delay CSS properties.
pseudoElement: This property returns a DOMString, starting with "::", containing the name of the pseudo-element that generated the animation, if any. If no pseudo-element was involved, an empty string is returned.

Here are some examples that demonstrate how to use these properties:

Accessing AnimationEvent properties: This example shows how to access the properties of an AnimationEvent object within an event listener:

element.addEventListener('animationend', (event) => {
  console.log(`Animation ${event.animationName} ended after ${event.elapsedTime} seconds`);
});

Using AnimationEvent with addEventListener: This example shows how to use the addEventListener method to register an event listener for an animation event:

element.addEventListener('animationend', (event) => {
  console.log(`Animation ${event.animationName} ended`);
});

Using AnimationEvent with removeEventListener: This example shows how to use the removeEventListener method to unregister an event listener for an animation event:

const handleAnimationEnd = (event) => {
  console.log(`Animation ${event.animationName} ended`);
};

element.addEventListener('animationend', handleAnimationEnd);

// Later on...
element.removeEventListener('animationend', handleAnimationEnd);

Using AnimationEvent with inline event handlers: This example shows how to use inline event handlers to register an event listener for an animation event:

<div id="example" style="animation: example-animation 2s;" onanimationend="handleAnimationEnd(event)">
  ...
</div>

<script>
  function handleAnimationEnd(event) {
    console.log(`Animation ${event.animationName} ended`);
  }
</script>

Using AnimationEvent with jQuery: This example shows how to use jQuery to register an event listener for an animation event:

$('#example').on('animationend', (event) => {
  console.log(`Animation ${event.originalEvent.animationName} ended`);
});

These examples demonstrate how you can use the properties of the AnimationEvent interface to interact with CSS animations through JavaScript, allowing you to create more dynamic and interactive web pages.

Defining the animation sequence using keyframes

Defining the animation sequence using keyframes is an essential step in creating CSS animations. The @keyframes at-rule in CSS is used to define the keyframes for an animation. Keyframes specify the styles that the element will have at certain times during the animation. By defining multiple keyframes, you can create complex animations that smoothly transition between different styles.

Each keyframe is defined using a percentage value that indicates the time during the animation sequence at which the keyframe takes place. For example, a keyframe defined with 0% represents the start of the animation, while a keyframe defined with 100% represents the end of the animation. You can also define intermediate keyframes using percentage values between 0% and 100%.

Here are 5 examples that demonstrate how to define the animation sequence using keyframes:

Simple animation: This example shows how to create a simple animation that changes the background color of an element from red to blue over a period of 2 seconds:

@keyframes change-color {
  from { background-color: red; }
  to { background-color: blue; }
}

.example {
  animation-name: change-color;
  animation-duration: 2s;
}

Multiple keyframes: This example shows how to use multiple keyframes to create a more complex animation that changes the background color of an element from red to green to blue over a period of 4 seconds:

@keyframes change-color {
  0% { background-color: red; }
  50% { background-color: green; }
  100% { background-color: blue; }
}

.example {
  animation-name: change-color;
  animation-duration: 4s;
}

Intermediate waypoints: This example shows how to use intermediate waypoints to create an animation that moves an element from left to right and then back again over a period of 4 seconds:

@keyframes move {
  from { transform: translateX(0); }
  50% { transform: translateX(100px); }
  to { transform: translateX(0); }
}

.example {
  animation-name: move;
  animation-duration: 4s;
}

Multiple properties: This example shows how to animate multiple properties at once by defining keyframes for each property. In this example, we create an animation that changes the background color and position of an element over a period of 4 seconds:

@keyframes change-color-and-move {
  from {
    background-color: red;
    transform: translateX(0);
  }

  to {
    background-color: blue;
    transform: translateX(100px);
  }
}

.example {
  animation-name: change-color-and-move;
  animation-duration: 4s;
}

Animation shorthand: This example shows how to use the animation shorthand property to specify multiple animation properties at once. In this example, we create an animation that changes the background color of an element from red to blue over a period of 2 seconds, with a delay of 1 second before the animation starts:

@keyframes change-color {
  from { background-color: red; }
  to { background-color: blue; }
}

.example {
  animation: change-color 2s ease-in-out 1s;
}

These examples demonstrate how you can use the @keyframes at-rule and percentages to define the animation sequence using keyframes. By establishing one or more keyframes, you can create complex animations that smoothly transition between different styles.
Sure! Here are some more examples that demonstrate how to define the animation sequence using keyframes:

Bouncing ball: This example shows how to create an animation that simulates a bouncing ball using keyframes and the animation-timing-function property:

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  40%, 43% {
    transform: translateY(-30px);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  }

  70% {
    transform: translateY(-15px);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  }

  90% {
    transform: translateY(-4px);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
}

.example {
  animation-name: bounce;
  animation-duration: 2s;
}

Pulse effect: This example shows how to create a pulse effect by animating the transform property using keyframes:

@keyframes pulse {
  from { transform: scale3d(1,1,1); }

  50% { transform: scale3d(1.05,1.05,1.05); }

  to { transform: scale3d(1,1,1); }
}

.example {
  animation-name: pulse;
  animation-duration: 2s;
}

Fade in and out: This example shows how to create a fade in and out effect by animating the opacity property using keyframes:

@keyframes fade-in-out {
  from { opacity: 0; }

  to { opacity: 1; }
}

.example {
   animation-name: fade-in-out;
   animation-duration:2s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

Rotate: This example shows how to create a rotation effect by animating the transform property using keyframes:

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.example {
   animation-name: rotate;
   animation-duration:2s;
   animation-iteration-count: infinite;
}

Shake: This example shows how to create a shake effect by animating the transform property using keyframes:

@keyframes shake {
   from,
   to { transform: translateX(0); }

   /* Move left */
   10%, 
   /* Move right */
   /* Move left */
   /* Move right */
   /* Move left */
   /* Move right */
   /* Move left */
   /* Move right */
   /* Move left */
   /* Move right */
}

.example {
   animation-name: shake;
   animation-duration:.5s;
}

CSS animations examples and interactive demos

Examples and interactive demos are a great way to get hands-on practice with creating and configuring CSS animations. By working through examples and experimenting with interactive demos, you can learn how to use the various properties and techniques involved in creating CSS animations, and gain a deeper understanding of how they work.

There are many resources available online that provide examples and interactive demos of CSS animations. Some popular sites that offer a wide range of examples and demos include CodePen¹, 1stWebDesigner⁴, Mockplus³, Slider Revolution⁵ and many others. These sites allow you to browse through a variety of CSS animation examples, and often provide the code for each example so you can see how it was created.

Interactive demos are particularly useful for learning about CSS animations, as they allow you to experiment with different properties and values in real-time. By adjusting the values of various properties, you can see how they affect the animation, and gain a better understanding of how to create the effects you want.

Overall, examples and interactive demos are an excellent way to get hands-on practice with creating and configuring CSS animations. By working through examples and experimenting with interactive demos, you can learn the techniques involved in creating CSS animations, and gain the skills you need to create your own animations.

(1) 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos). .
(2) 150 Amazing Examples of CSS Animation & Effects - 1stWebDesigner. .
(3) 30 Cool CSS Animation Examples to Create Amazing Animation ... - Mockplus.
(4) Cool CSS Animation Examples You Can Use Too - Slider Revolution.
(5) 24 Creative and Unique CSS Animation Examples to Inspire Your Own.

100 days CSS day 1 challenge Solution explained

Stanley — Mon, 07 Aug 2023 20:10:45 +0000

HTML CODE

<div class="frame">
  <div class="center">
    <div class="number">
      <div class="one-one"></div>
      <div class="one-two"></div>
      <div class="zero-one"></div>
      <div class="zero-two"></div>
    </div>
    <span class="big">Days</span>
    <span class="small">CSS Challenge</span>
  </div>
</div>

CSS CODE

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
  background: #43389F;
  background: -webkit-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: -moz-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: -o-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: linear-gradient(to top right, #43389F 0%, #4ec6ca 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43389F', endColorstr='#4ec6ca',GradientType=1 ); 
  font-family: 'Courier New', 'Courier', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50.8%;
  left: 50.5%;
  transform: translate(-50%,-50%);
}

.number {
  position: relative;
  height: 100px;
  width: 200px;

  .one-one {
    position: absolute;
    z-index: 1;
    top: 0;
    left: -16px;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }

  .one-two {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0px;
    height: 100px;
    width: 24px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }

  .zero-one, 
  .zero-two {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 17px;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 24px solid #fff;
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }

  .zero-two {
    z-index: 6;
    left: 100px;
  }
}

.big {
  position: relative;
  z-index: 20;
  display: block;
  font-size: 82px;
  line-height: 60px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}

.small {
  position: relative;
  z-index: 20;
  display: block; 
  font-size: 23px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
}

EXPLANATION

The .frame selector applies styles to the div element with the class of frame. This is the outermost container of the challenge.
- The position: absolute property positions the element relative to its closest positioned ancestor, which in this case is the body element.
- The top: 50% and left: 50% properties move the element to the center of its parent element.
- The width: 400px and height: 400px properties set the size of the element to 400 pixels by 400 pixels.
- The margin-top: -200px and margin-left: -200px properties offset the element by half of its width and height, so that it is exactly centered in the viewport.
- The border-radius: 2px property rounds the corners of the element slightly.
- The box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3) property adds a subtle shadow to the element, giving it some depth.
- The background property sets the background color of the element to a gradient that goes from purple (#43389F) to turquoise (#4ec6ca) diagonally. The different prefixes (-webkit-, -moz-, -o-, and no prefix) are used to ensure compatibility with different browsers. The filter property is used for Internet Explorer.
- The font-family, color, -webkit-font-smoothing, and -moz-osx-font-smoothing properties set the font and color of the text inside the element, and make it look smoother on different screens.
The .center selector applies styles to the div element with the class of center. This is the inner container of the challenge that holds the number and the text.
- The position: absolute property positions the element relative to its closest positioned ancestor, which in this case is the frame div.
- The top: 50.8% and left: 50.5% properties move the element slightly below and to the right of the center of its parent element. This is done to create a visual balance with the number and the text.
- The transform: translate(-50%,-50%) property shifts the element by half of its width and height, so that it is centered in its parent element.
The .number selector applies styles to the div element with the class of number. This is the container that holds the two digits of the number "100".
- The position: relative property positions the element relative to its normal position in the document flow.
- The height: 100px and width: 200px properties set the size of the element to 100 pixels by 200 pixels.
The .one-one, .one-two, .zero-one, and .zero-two selectors apply styles to the div elements with these classes. These are the elements that create the shapes of the digits "1" and "0".
- The position: absolute property positions each element relative to its closest positioned ancestor, which in this case is the number div.
- The z-index property sets the stacking order of each element, so that some elements appear above or below others.
- The top, left, height, width, and border-radius properties set the position and size of each element, and round their corners if needed.
- The background or border properties set the color of each element, using white (#fff) for consistency.
- The transform: rotate() property rotates some elements by a certain degree, to create an angle or a curve.
- The box-shadow property adds a shadow to each element, giving them some depth.
The .big selector applies styles to the span element with the class of big. This is the text that says "Day 001".
- The position: relative property positions the element relative to its normal position in the document flow.
- The z-index: 20 property sets a high stacking order for this element, so that it appears above all other elements in its parent container.
- The display: block property makes this element behave like a block-level element, taking up its own line.
- The font-size: 82px, line-height: 60px, text-transform: uppercase, and font-weight: 700 properties set the size, spacing, and weight of the text, making it look bold and capitalized.
- The margin-top: 6px property adds some space above this element, creating a gap between it and the previous element.
The .small selector applies styles to the span element with the class of small. This is the text that says "CSS Challenge".
- The position: relative property positions the element relative to its normal position in the document flow.
- The z-index: 20 property sets a high stacking order for this element, so that it appears above all other elements in its parent container.
- The display: block property makes this element behave like a block-level element, taking up its own line.
- The font-size: 23px, line-height: 20px, text-transform: uppercase, and font-weight: 700 properties set the size, spacing, and weight of the text, making it look bold and capitalized.
- The letter-spacing: .04em property adds some extra space between each letter, making the text more readable.

CREDITS:
"Bing, a chat mode of Microsoft Bing search, helped me create this post. Bing can speak different languages, generate various content, and answer questions in depth.

This code is based on the 100 days CSS , a website with daily CSS tasks for all levels. Learn more and see other solutions here. Follow them on Twitter, Facebook, or Instagram for updates and community."