一、keyframes模板
@keyframes open-close {
0%, 10% {
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
transform: scaleY(0)
}
25% {
-webkit-transform: scaleY(1.2);
-moz-transform: scaleY(1.2);
transform: scaleY(1.2)
}
100%, 30% {
-webkit-transform: none;
-moz-transform: none;
transform: none
}
}
@keyframes show {
0%, 10% {
opacity: 0
}
100%, 50% {
opacity: 1
}
}
@keyframes in-out {
0%, 30% {
-webkit-transform: scale(0) translateX(0) translateY(0);
-moz-transform: scale(0) translateX(0) translateY(0);
transform: scale(0) translateX(0) translateY(0)
}
100%, 80% {
-webkit-transform: none;
-moz-transform: none;
transform: none
}
}
@keyframes left-right {
0%, 10% {
opacity: 0;
-webkit-transform: scale(1) translateX(-5px)