Lesson 7 Practice Activities

The breathing effect is a type of pulsing effect. The idea is that the styles are meant to create an effect where the intensity of the color, glow, or other style gradually changes from intense to subtle over time. The change would occur over a longer period of time for the breathing effect, like a person breathing in and then out takes time to go from one state to the next. Pulsing, in general, would be faster between the changes, like a heartbeat is quicker than taking a breath.

<button class="breathe">Click Me</button>
            

.breathe:hover, .breathe:focus {
  animation: breathe 1.5s ease-out;
  animation-iteration-count: infinite;
}

@keyframes breathe {
  from {
    box-shadow: 0 0 10px var(--accent-color-600);
    border-color: var(--accent-color-200);
  }
  50% {
    box-shadow: 0 0 10px var(--accent-color-200);
    border-color: var(--accent-color-600);
  }
  to {
    box-shadow: 0 0 10px var(--accent-color-600);
    border-color: var(--accent-color-200);
  }
}