|
|
|
@ -29,133 +29,152 @@
|
|
|
|
|
.zoom-motion(bi-zoom-left, biZoomLeft); |
|
|
|
|
.zoom-motion(bi-zoom-right, biZoomRight); |
|
|
|
|
|
|
|
|
|
//.keyframes(biZoomIn, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(0.2); |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// opacity: 1; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomOut, { |
|
|
|
|
// 0% { transform: scale(1); } |
|
|
|
|
// 100% { transform: scale(0.2); opacity: 0; } |
|
|
|
|
//}); |
|
|
|
|
.keyframes(biZoomIn, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(0.2); |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomOut, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(0.2); |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomBigIn, { |
|
|
|
|
0% {transform: scale(0.8);opacity: 0;} |
|
|
|
|
100% {transform: scale(1);opacity: 1;} |
|
|
|
|
0% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomBigOut, { |
|
|
|
|
0% {transform: scale(1);} |
|
|
|
|
100% {transform: scale(0.8);opacity: 0;} |
|
|
|
|
0% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomUpIn, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 50% 0%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 50% 0%; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomUpOut, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 50% 0%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 50% 0%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomLeftIn, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 0% 50%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 0% 50%; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
//.keyframes(biZoomUpIn, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 50% 0%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 50% 0%; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomUpOut, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 50% 0%; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 50% 0%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomLeftIn, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 0% 50%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 0% 50%; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomLeftOut, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 0% 50%; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 0% 50%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomRightIn, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 100% 50%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 100% 50%; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomRightOut, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 100% 50%; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 100% 50%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomDownIn, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 50% 100%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 50% 100%; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
// |
|
|
|
|
//.keyframes(biZoomDownOut, { |
|
|
|
|
// 0% { |
|
|
|
|
// transform: scale(1); |
|
|
|
|
// transform-origin: 50% 100%; |
|
|
|
|
// } |
|
|
|
|
// |
|
|
|
|
// 100% { |
|
|
|
|
// transform: scale(0.8); |
|
|
|
|
// transform-origin: 50% 100%; |
|
|
|
|
// opacity: 0; |
|
|
|
|
// } |
|
|
|
|
//}); |
|
|
|
|
.keyframes(biZoomLeftOut, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 0% 50%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 0% 50%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomRightIn, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 100% 50%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 100% 50%; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomRightOut, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 100% 50%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 100% 50%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomDownIn, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 50% 100%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 50% 100%; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
.keyframes(biZoomDownOut, { |
|
|
|
|
0% { |
|
|
|
|
transform: scale(1); |
|
|
|
|
transform-origin: 50% 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: scale(0.8); |
|
|
|
|
transform-origin: 50% 100%; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|