css常用的动画库

淡入淡出

@keyframes aniFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes aniFadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

缓入缓出

@keyframes aniEaseIn {
            0% {
                opacity: 0;
                transform: scale(0.9);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes aniEaseOut {
            0% {
                opacity: 1;
                transform: scale(1);
            }

            100% {
                opacity: 0;
                transform: scale(0.9);
            }
        }

从上滑入滑出

@keyframes aniSlideUpIn {
    0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
    100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
}

@keyframes aniSlideUpOut {
    0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
}

从下滑入滑出

@keyframes aniSlideDownIn {
    0% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: scaleY(.8);
    }
    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scaleY(1);
    }
}

@keyframes aniSlideDownOut {
    0% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: scaleY(.8);
    }
}

从左滑入滑出

@keyframes aniSlideLeftIn {
    0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleX(.8);
    }
    100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleX(1);
    }
}

@keyframes aniSlideLeftOut {
    0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleX(.8);
    }
}

从右滑入滑出

 @keyframes aniSlideRightIn {
            0% {
                opacity: 0;
                transform-origin: 100% 0%;
                transform: scaleX(.8);
            }

            100% {
                opacity: 1;
                transform-origin: 100% 0%;
                transform: scaleX(1);
            }
        }

        @keyframes aniSlideRightOut {
            0% {
                opacity: 1;
                transform-origin: 100% 0%;
                transform: scaleX(1);
            }

            100% {
                opacity: 0;
                transform-origin: 100% 0%;
                transform: scaleX(.8);
            }
        }

slide 落入 落出

@keyframes aniTransitionDropIn {
            0% {
                opacity: 0;
                transform: scaleY(0.8);
            }

            100% {
                opacity: 1;
                transform: scaleY(1);
            }
        }

        @keyframes aniTransitionDropOut {
            0% {
                opacity: 1;
                transform: scaleY(1);
            }

            100% {
                opacity: 0;
                transform: scaleY(0.8);
            }
        }

从下移入移出

@keyframes aniMoveDownIn {
    0% {
        transform-origin: 0 0;
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes aniMoveDownOut {
    0% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(100%);
        opacity: 0;
    }
}

从上移入移出

@keyframes aniMoveUpIn {
    0% {
        transform-origin: 0 0;
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes aniMoveUpOut {
    0% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(-100%);
        opacity: 0;
    }
}

从左移入移出

@keyframes aniMoveLeftIn {
            0% {
                transform-origin: 0 0;
                transform: translateX(-100%);
                opacity: 0;
            }

            100% {
                transform-origin: 0 0;
                transform: translateX(0%);
                opacity: 1;
            }
        }

        @keyframes aniMoveLeftOut {
            0% {
                transform-origin: 0 0;
                transform: translateX(0%);
                opacity: 1;
            }

            100% {
                transform-origin: 0 0;
                transform: translateX(-100%);
                opacity: 0;
            }
        }

从右移入移出

@keyframes aniMoveRightIn {
            0% {
                opacity: 0;
                transform-origin: 0 0;
                transform: translateX(100%);
            }

            100% {
                opacity: 1;
                transform-origin: 0 0;
                transform: translateX(0%);
            }
        }

        @keyframes aniMoveRightOut {
            0% {
                transform-origin: 0 0;
                transform: translateX(0%);
                opacity: 1;
            }

            100% {
                transform-origin: 0 0;
                transform: translateX(100%);
                opacity: 0;
            }
        }

旋转弹起

@keyframes ani-spin-bounce {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(1);
        opacity: 0
    }
}

loading转圈圈

@keyframes ani-demo-spin {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(1turn)
    }
}

补充svg动画，多组动画