Animations Part 2

Let's explore more advanced animations including CSS keyframes and view transitions.

CSS Keyframe Animations

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.card.ng-enter {
    animation: fadeInDown 0.5s ease;
}

.card.ng-leave {
    animation: fadeOutUp 0.3s ease;
}

View Transition Animations

Animate route changes with ng-view:

.ng-enter {
    animation: slideInRight 0.4s ease;
}

.ng-leave {
    animation: slideOutLeft 0.4s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

Staggered Animations

/* Each item animates with a slight delay */
.item.ng-enter-stagger {
    transition-delay: 0.1s;
    transition-duration: 0;
}

.item.ng-enter {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.item.ng-enter-active {
    opacity: 1;
    transform: translateY(0);
}

Animate ng-class

.highlight-add {
    transition: background 0.5s;
}
.highlight {
    background: #ffffcc;
}
.highlight-remove {
    transition: background 0.5s;
}

<div ng-class="{ highlight: isHighlighted }">
    Toggle my highlight!
</div>