Quick Tip: CSS Animations

Quick Tip

CSS animations:

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Animation */
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

/* Transition */
.button {
  background: blue;
  transition: background 0.3s ease;
}

.button:hover {
  background: red;
}

/* Transform */
.rotate {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.rotate:hover {
  transform: rotate(90deg);
}

Powered by MonkeyCode: https://monkeycode-ai.net/

css #webdev #tips