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;
}

使用例子2：

<div class="bigbg">
<div class="bg"></div><div class="bg2"></div>
<div style="height: 1px;width: 100%;clear: both"></div>
</div>

.bg, .bg2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-left: 20px;
}

.bg2 {
background-color: yellow;
}

.bigbg {
width: 300px;
margin: 100px auto;
}

.bigbg:hover .bg {
-webkit-animation: left-right2 1.3s ease-in-out; /*up-down为keyframes的名字*/
-moz-animation: left-right2 1.3s ease-in-out;
animation: left-right2 1.3s ease-in-out;
}

.bigbg:hover .bg2 {
-webkit-animation: left-right 1.3s ease-in-out; /*up-down为keyframes的名字*/
-moz-animation: left-right 1.3s ease-in-out;
animation: left-right 1.3s ease-in-out;
}

@keyframes left-right {
0%, 10% {
-webkit-transform: scale(1) translateX(18px) translateY(0);
-moz-transform: scale(1) translateX(18px) translateY(0);
transform: scale(1) translateX(18px) translateY(0)
}
100%, 50% {
-webkit-transform: none;
-moz-transform: none;
transform: none
}
}

@keyframes left-right2 {
0%, 10% {
-webkit-transform: scale(1) translateX(-18px) translateY(0);
-moz-transform: scale(1) translateX(-18px) translateY(0);
transform: scale(1) translateX(-18px) translateY(0)
}
100%, 50% {
-webkit-transform: none;
-moz-transform: none;
transform: none
}

}

效果：

二、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)
}

2、鼠标移动上去时，图片放大

<img src="img/page/u2.png" />

div img{
transition: all 0.6s;
border: none;
}
div img:hover{
transform: scale(1.4);
}

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