Mastering Stylish Web Designs: Positioning, Transitions, and Animations in CSS

Introduction: Enhancing Web Designs

Welcome, eager learners! In today's exciting web design lesson, we're diving into CSS positioning, transitions, and animations . These dynamic enhancements breathe life into sterile web pages, creating vibrant and interactive digital experiences. Ready to jump in? Let's go!

Understanding Positioning in CSS

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

HTML

<style>
  /* These styles illustrate four positioning types in CSS */

  .static {
    position: static;  /* No positioning adjustments */
    border: 3px solid #4AFF82;
  }

  .relative {
    position: relative;  /* Move element from normal position */
    top: 30px;  /* Pushes the box 30px down from its original position */
    left: 20px;  /* Pushes the box 20px to the right of its original place */
    border: 3px solid #F98404;
  }

  .absolute {
    position: absolute;  /* Position relative to nearest positioned ancestor */
    top: 60px;  /* Positions the box 60px from the top edge of its nearest positioned ancestor */
    right: 0;  /* Positions the box at the right edge of the nearest positioned ancestor */
    border: 3px solid #0275D8;
  }

  .fixed {
    position: fixed;  /* Element fixed in the viewport */
    bottom: 0;  /* Positions the box at the very bottom */
    border: 3px solid #7034A3;
  }
</style>

<!-- Our HTML elements with different positioning types -->
<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>

CSS

transition: <transition-property> <transition-duration> <transition-timing-function>

transition: <transition-property> <transition-duration> <transition-timing-function>

HTML

<style>
  /* This class produces a smooth color transition on hover */

  .button {
    background-color: #4CAF50;  /* Start color */
    transition: background-color 0.5s ease;  /* Transition rule */
    padding: 15px;
    border: none;  /* removes the border from the element */
    color: white;
  }

  .button:hover {
    background-color: #45a049;  /* End color on mouse hover */
  }
</style>

<button class="button">Hover over me</button> <!-- Hover over this button to see transition -->

<style>
  /* This class produces a smooth color transition on hover */

  .button {
    background-color: #4CAF50;  /* Start color */
    transition: background-color 0.5s ease;  /* Transition rule */
    padding: 15px;
    border: none;  /* removes the border from the element */
    color: white;
  }

  .button:hover {
    background-color: #45a049;  /* End color on mouse hover */
  }
</style>

<button class="button">Hover over me</button> <!-- Hover over this button to see transition -->

HTML

<!-- An example of using keyframes to create an animation -->
<style>
  @keyframes moving-box {
    /* At the start, the box is at the left */
    0% {left: 0px;}
    /* At the halfway point, the box moves to the right */
    50% {left: 200px;}
    /* In the end, the box returns to the left */
    100% {left: 0px;}
  }
  
  .box {
    position: relative;  /* So we can use 'left' property */
    height: 50px;  /* Box height */
    width: 50px;  /* Box width */
    background-color: #4CAF50;  /* Box color */
    animation: moving-box 2s linear infinite;  /* Adding the animation */
  }
</style>

<div class="box"></div> <!-- Here's our animated box -->

<!-- An example of using keyframes to create an animation -->
<style>
  @keyframes moving-box {
    /* At the start, the box is at the left */
    0% {left: 0px;}
    /* At the halfway point, the box moves to the right */
    50% {left: 200px;}
    /* In the end, the box returns to the left */
    100% {left: 0px;}
  }
  
  .box {
    position: relative;  /* So we can use 'left' property */
    height: 50px;  /* Box height */
    width: 50px;  /* Box width */
    background-color: #4CAF50;  /* Box color */
    animation: moving-box 2s linear infinite;  /* Adding the animation */
  }
</style>

<div class="box"></div> <!-- Here's our animated box -->

CSS

0% {left: 0px;}

CSS

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-iteration-count>

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-iteration-count>

HTML

<style>
  @keyframes moving-box {
    0% {left: 0px;}
    100% {left: 200px;}
  }
  
  .box {
    position: relative;
    height: 50px;
    width: 50px;
    background-color: #4CAF50;
    animation: moving-box 1s linear infinite alternate;
  }
</style>

<div class="box"></div> <!-- Here's our animated box -->

<style>
  @keyframes moving-box {
    0% {left: 0px;}
    100% {left: 200px;}
  }
  
  .box {
    position: relative;
    height: 50px;
    width: 50px;
    background-color: #4CAF50;
    animation: moving-box 1s linear infinite alternate;
  }
</style>

<div class="box"></div> <!-- Here's our animated box -->

CSS

transition: <transition-property> <transition-duration> <transition-timing-function>

HTML

<style>
  /* This class produces a smooth color transition on hover */

  .button {
    background-color: #4CAF50;  /* Start color */
    transition: background-color 0.5s ease;  /* Transition rule */
    padding: 15px;
    border: none;  /* removes the border from the element */
    color: white;
  }

  .button:hover {
    background-color: #45a049;  /* End color on mouse hover */
  }
</style>

<button class="button">Hover over me</button> <!-- Hover over this button to see transition -->

HTML

<!-- An example of using keyframes to create an animation -->
<style>
  @keyframes moving-box {
    /* At the start, the box is at the left */
    0% {left: 0px;}
    /* At the halfway point, the box moves to the right */
    50% {left: 200px;}
    /* In the end, the box returns to the left */
    100% {left: 0px;}
  }
  
  .box {
    position: relative;  /* So we can use 'left' property */
    height: 50px;  /* Box height */
    width: 50px;  /* Box width */
    background-color: #4CAF50;  /* Box color */
    animation: moving-box 2s linear infinite;  /* Adding the animation */
  }
</style>

<div class="box"></div> <!-- Here's our animated box -->

CSS

0% {left: 0px;}

CSS

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-iteration-count>

HTML

<style>
  @keyframes moving-box {
    0% {left: 0px;}
    100% {left: 200px;}
  }
  
  .box {
    position: relative;
    height: 50px;
    width: 50px;
    background-color: #4CAF50;
    animation: moving-box 1s linear infinite alternate;
  }
</style>

<div class="box"></div> <!-- Here's our animated box -->