The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
For new Angular code, build the motion in CSS and connect it to DOM insertion and removal with Angular’s animate.enter and animate.leave. Angular’s documentation explicitly recommends native CSS with these APIs for all new animation code. CSS handles the visual sequence; Angular handles when an element enters or leaves the DOM.
Choose a transition or keyframes based on the motion
Use a CSS transition when an element moves between two style states, such as a card changing from hidden to visible. Use @keyframes when the motion needs intermediate steps, a multi-part arc, or a reusable sequence.
Transition between two states
For a transition on entry, the class applied by animate.enter supplies the destination style. The base rule describes the resting state; @starting-style supplies the initial style for the transition.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match.panel {
opacity: 1;
transform: translateY(0);
transition: opacity 240ms ease-out, transform 240ms ease-out;
}
@starting-style {
.panel {
opacity: 0;
transform: translateY(12px);
}
}The duration controls how long the change takes, the easing function controls its pacing, and a delay can postpone its start. Apply these properties to the styles that actually change; unrelated properties need not transition.
#1 Best Overall
Use keyframes for a sequence
Keyframes let you define explicit intermediate values rather than only a start and destination. This example fades and lifts a panel into place:
@keyframes panel-in {
from {
opacity: 0;
transform: translateY(16px);
}
70% {
opacity: 1;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.panel-enter {
animation: panel-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}Use animation-duration, animation-delay, and animation-timing-function to tune timing. The both fill mode applies the relevant keyframe styles before and after the active interval; choose fill behavior deliberately when the element’s base styles should take over after animation.
Coordinate several effects or stagger a list
CSS can run multiple animations on one element by listing them in the animation shorthand. Each comma-separated entry describes one animation.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rise-in {
from { transform: translateY(14px); }
to { transform: translateY(0); }
}
.card-enter {
animation: fade-in 220ms ease-out both,
rise-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}To create a cascade in a rendered list, give each item a progressively larger delay. Bind a stable item index or other appropriate value from the template rather than hard-coding separate rules for every item.
.list-item-enter {
animation: fade-in 220ms ease-out both;
animation-delay: var(--enter-delay, 0ms);
}For example, set --enter-delay on each item to its index multiplied by a small interval. A transition-based cascade can use transition-delay in the same per-item manner. Keep delays short enough that later items do not appear stuck waiting after the list is already visible.
Connect CSS to Angular’s entry and leave lifecycle
animate.enter and animate.leave are compiler-supported Angular APIs, not directives. They can apply one CSS class or an array of classes, or call a function. Use them where Angular controls whether an element is present.
Rank #3
<button type="button" (click)="showPanel = !showPanel">
Toggle panel
</button>
@if (showPanel) {
<section
class="panel"
animate.enter="panel-enter"
animate.leave="panel-leave">
Panel content
</section>
}Define panel-enter and panel-leave in CSS using transitions or keyframes. With a transition, use the enter class for the destination style and pair it with @starting-style when an initial state is required. Angular removes entry classes when the associated animation or transition completes.
On leave, Angular applies the leave class and keeps the element in the DOM until its animation finishes, then removes it. If multiple animations or transitions apply, Angular waits for the longest one. A long duration or delay therefore also delays removal.
Respect reduced-motion preferences
Offer a shorter or motion-free alternative when a visitor’s system requests reduced motion. The prefers-reduced-motion media query can override both keyframe animations and transitions.
@media (prefers-reduced-motion: reduce) {
.panel-enter,
.panel-leave,
.list-item-enter {
animation-duration: 1ms;
animation-delay: 0ms;
}
.panel {
transition-duration: 1ms;
}
}Adjust the selectors to match the effects in your application. If motion is not necessary to communicate a change, removing it entirely may be preferable to shrinking its duration.
Account for component boundaries and animation control
Angular’s CSS animation guidance notes that a nested component’s animate.leave animation does not fire when its parent element is removed. Do not assume that removing a parent automatically gives every descendant an independent leave lifecycle. Put the lifecycle animation at the element whose removal Angular controls, or restructure the removal so the child can complete its own leave animation.
For imperative control, the browser’s Web Animations API can work with animations associated with an element. Angular’s guide notes that Element.getAnimations() returns those animations; the returned animations can be paused, played, reversed, or cancelled. This is useful when CSS alone does not provide the control flow your interaction needs.
What to do with older Angular animation code
Existing applications may use the legacy @angular/animations package and its trigger/transition model. Its sequence utilities include query() to find descendants, stagger() to add cascading delays, group() to run steps in parallel, and sequence() to run them one after another. Those concepts can help explain older code, but they are not the recommended starting point for new animations.
Angular’s current complex-sequences guide recommends native CSS with animate.enter and animate.leave for new code. The API references for animate, query, and keyframes mark them deprecated since v20.2. The keyframes reference states an intent to remove it in v23; that is a stated future intent, not evidence that removal has already occurred. Check the API documentation for the Angular version you are upgrading before planning a migration.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
