Plain JS Fade In

by Carson Evans

HTML

<div class="alert alert-warning fade-in">
  Warning, that might be an issue
</div>
<div class="alert alert-warning alert-autohide fade-in">
  Warning, that might be an issue
</div>

CSS

.body {
  font-family: Arial, Helvetica, sans-serif;
}

.alert {
  padding: 15px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
}

.alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border-color: #ffe595;
}

.fade-in {
  opacity: 0;
  transition: opacity 1s;
}

.fade-in-start {
    opacity: 1.5;
}

JavaScript

window.addEventListener('load', function () {
  document.querySelectorAll('.fade-in').forEach((el) => {
    el.classList.add('fade-in-start');
  });
});