Create Visually Appealing Websites with CSS Animations

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35175{{"`Button Swing Animation`"}} css/colors -.-> lab-35175{{"`Button Swing Animation`"}} css/margin_and_padding -.-> lab-35175{{"`Button Swing Animation`"}} css/borders -.-> lab-35175{{"`Button Swing Animation`"}} css/backgrounds -.-> lab-35175{{"`Button Swing Animation`"}} css/animations -.-> lab-35175{{"`Button Swing Animation`"}} css/transitions -.-> lab-35175{{"`Button Swing Animation`"}} css/transformations -.-> lab-35175{{"`Button Swing Animation`"}} css/mixins -.-> lab-35175{{"`Button Swing Animation`"}} css/pseudo_classes -.-> lab-35175{{"`Button Swing Animation`"}} end

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.

Button Swing Animation

Introduction

Skills Graph

Button Swing Animation

Summary

Other CSS Tutorials you may like