add_filter( 'bricks/setup/control_options', function( $options ) {
// Add custom animation into animationTypes
// Note that the key is very important, must be unique
$options['animationTypes']['pedroMove'] = esc_html__( 'Custom animation', 'bricks' );
return $options;
}, 10 );
.brx-animate-pedroMove {
animation-name: pedroMove;
}
@keyframes pedroMove {
0% {
animation-timing-function: ease-in;
opacity: 0;
transform: translateY(-250px);
}
38% {
animation-timing-function: ease-out;
opacity: 1;
transform: translateY(0);
}
55% {
animation-timing-function: ease-in;
transform: translateY(-65px);
}
72% {
animation-timing-function: ease-out;
transform: translateY(0);
}
81% {
animation-timing-function: ease-in;
transform: translateY(-28px);
}
90% {
animation-timing-function: ease-out;
transform: translateY(0);
}
95% {
animation-timing-function: ease-in;
transform: translateY(-8px);
}
100% {
animation-timing-function: ease-out;
transform: translateY(0);
}
}