SkillSeevaSkillSeeva
HomeResourcesScheduleRoadmapTeam
Back to Categories
Current Path
CSS3
Syntax & SelectorsColors & BackgroundsThe Box ModelCSS UnitsText & FontsDisplay & VisibilityPositioning & Z-IndexFlexboxCSS GridCombinatorsShadows & GradientsResponsive (Media Queries)Object Fit & CoverPseudo-classes & ElementsTransitions & AnimationsCSS Variables
Jump to topic:
Syntax & SelectorsColors & BackgroundsThe Box ModelCSS UnitsText & FontsDisplay & VisibilityPositioning & Z-IndexFlexboxCSS GridCombinatorsShadows & GradientsResponsive (Media Queries)Object Fit & CoverPseudo-classes & ElementsTransitions & AnimationsCSS Variables

Transitions & Animations

CSS animations allows animation of most HTML elements without using JavaScript.
css
/* Transition */
div {
  transition: width 2s, transform 0.5s;
}

div:hover {
  transform: rotate(45deg);
}

/* Keyframe Animation */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation-name: example;
  animation-duration: 4s;
}
15 / 16