Curriculum
Course: AngularJS
Login

Curriculum

AngularJS

AngularJS Tutorial

0/65
Text lesson

CSS Transitions

CSS transitions enable smooth changes of CSS property values from one state to another over a specified duration.

Example:

When the DIV element receives the .ng-hide class, the transition will last 0.5 seconds, smoothly reducing its height from 100px to 0.

<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>

CSS Animations

CSS animations allow for smooth transitions of CSS property values from one value to another over a specified duration.

Example:

When the DIV element receives the .ng-hide class, the myChange animation will execute, smoothly transitioning the height from 100px to 0.

<style>
@keyframes myChange {
  from {
    height: 100px;
  } to {
    height: 0;
  }
}

div {
  height: 100px;
  background-color: lightblue;
}

div.ng-hide {
  animation: 0.5s myChange;
}
</style>

 

Previous
Next