Button Swing Animation

Introduction

In this lab, we will explore CSS programming by learning how to create and modify stylesheets to control the appearance of web pages. You will gain hands-on experience with various CSS properties and selectors to create visually appealing and responsive designs. By the end of the lab, you will have a solid understanding of CSS and be able to apply your knowledge to create professional-looking websites.

Button Swing Animation

index.html and style.css have already been provided in the VM.

To create a swing animation on focus, you should use an appropriate transition to animate changes to the element. Then, apply the :focus pseudo-class to the element and use animation with transform to make it swing. Finally, add animation-iteration-count to play the animation only once. Here is an example of how to do this in HTML and CSS:

<button class="button-swing">Submit</button>

.button-swing {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.button-swing:focus {
  animation: swing 1s ease;
  animation-iteration-count: 1;
}

@keyframes swing {
  15% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(3px);
  }
  65% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Button Swing Animation lab. You can practice more labs in LabEx to improve your skills.