css3动画效果模板

一、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) translateY(0);
        -moz-transform: scale(1) translateX(-5px) translateY(0);
        transform: scale(1) translateX(-5px) translateY(0)
    }
    100%, 50% {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none
    }
}

/*缩小放大*/
@keyframes min-large {
    0%, 20% {
        opacity: 0;
        -webkit-transform: scale(3) translateX(0) translateY(0);
        -moz-transform: scale(3) translateX(0) translateY(0);
        transform: scale(3) translateX(0) translateY(0)
    }
    100%, 60% {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none
    }
}

/*上下浮动*/
@keyframes up-down {
    from {
        -webkit-transform: translateY(12px);
        -moz-transform: translateY(12px);
        transform: translateY(12px)
    }
    to {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        transform: translateY(-5px)
    }
}

/*旋转*/
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
     }
}

使用例子：

<div class="bg"></div>

  .bg {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px auto;

        -webkit-animation: up-down 1.4s ease 0s both infinite alternate;       /*up-down为keyframes的名字*/
        -moz-animation: up-down 1.4s ease 0s both infinite alternate;
        animation: up-down 1.4s ease 0s both infinite alternate;
    }

二、transform模板

1、鼠标移动上去时，底部呈现阴影，盒子上移特效

<div class="bg"></div>

.bg{
    width: 400px;
    height: 450px;
    margin: 200px auto;
    background-color: lightgrey;
    border: solid 1px #eee;
    transition: transform .3s ease-in-out, box-shadow .3s cubic-bezier(.47, 0, .745, .715), border .3s linear .1s;
}

.bg:hover {
    box-shadow: 0 10px 50px rgba(51, 51, 51, .25);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px)
}

如果想要先了解animation、transform、keyframes这几个属性的知识点，推荐博客：https://blog.csdn.net/u013243347/article/details/79976352
在网上找到的一位大神的动画模板：https://www.cnblogs.com/starof/p/4968769.html