.ajoanim-slide-left,
.ajoanim-slide-up,
.ajoanim-slide-right,
.ajoanim-slide-down,
.ajoanim-zoom-in,
.ajoanim-zoom-out,
.ajoanim-fade-in {
opacity: 0;
will-change: transform, opacity;
} [class*="ajoanim-"].ajoanim-trigger {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}  @keyframes ajoanim-kf-slide-left {
0%   { opacity: 0; transform: translateX(50px); }
100% { opacity: 1; transform: translateX(0); }
}
.ajoanim-slide-left.ajoanim-trigger { animation-name: ajoanim-kf-slide-left; } @keyframes ajoanim-kf-slide-up {
0%   { opacity: 0; transform: translateY(50px); }
100% { opacity: 1; transform: translateY(0); }
}
.ajoanim-slide-up.ajoanim-trigger { animation-name: ajoanim-kf-slide-up; } @keyframes ajoanim-kf-slide-right {
0%   { opacity: 0; transform: translateX(-50px); }
100% { opacity: 1; transform: translateX(0); }
}
.ajoanim-slide-right.ajoanim-trigger { animation-name: ajoanim-kf-slide-right; } @keyframes ajoanim-kf-slide-down {
0%   { opacity: 0; transform: translateY(-50px); }
100% { opacity: 1; transform: translateY(0); }
}
.ajoanim-slide-down.ajoanim-trigger { animation-name: ajoanim-kf-slide-down; } @keyframes ajoanim-kf-zoom-in {
0%   { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
.ajoanim-zoom-in.ajoanim-trigger { animation-name: ajoanim-kf-zoom-in; } @keyframes ajoanim-kf-zoom-out {
0%   { opacity: 0; transform: scale(1.5); }
100% { opacity: 1; transform: scale(1); }
}
.ajoanim-zoom-out.ajoanim-trigger { animation-name: ajoanim-kf-zoom-out; } @keyframes ajoanim-kf-flash {
0%, 50%, 100% { opacity: 1; }
25%, 75%      { opacity: 0; }
}
.ajoanim-flash { opacity: 1; } .ajoanim-flash.ajoanim-trigger { 
animation-name: ajoanim-kf-flash; 
animation-timing-function: linear; 
} @keyframes ajoanim-kf-fade-in {
0%   { opacity: 0; }
100% { opacity: 1; }
}
.ajoanim-fade-in.ajoanim-trigger { animation-name: ajoanim-kf-fade-in; } @keyframes ajoanim-kf-fade-out {
0%   { opacity: 1; }
100% { opacity: 0; pointer-events: none; }
}
.ajoanim-fade-out { opacity: 1; } .ajoanim-fade-out.ajoanim-trigger { animation-name: ajoanim-kf-fade-out; }