@-webkit-keyframes Move {
0% {
-webkit-transform:translate(0, 0)
}
20% {
-webkit-transform:translate(0, 1px)
}
40% {
-webkit-transform:translate(1px, 2px)
}
60% {
-webkit-transform:translate(2px, 3px)
}
80% {
-webkit-transform:translate(3px, 4px)
}
100% {
-webkit-transform:translate(4px, 5px)
}
}
@keyframes Move {
0% {
-webkit-transform:translate(0, 0);
transform:translate(0, 0)
}
20% {
-webkit-transform:translate(0, 1px);
transform:translate(0, 1px)
}
40% {
-webkit-transform:translate(1px, 2px);
transform:translate(1px, 2px)
}
60% {
-webkit-transform:translate(2px, 3px);
transform:translate(2px, 3px)
}
80% {
-webkit-transform:translate(3px, 4px);
transform:translate(3px, 4px)
}
100% {
-webkit-transform:translate(4px, 5px);
transform:translate(4px, 5px)
}
}
@-webkit-keyframes FlipInY {
0% {
-webkit-transform:rotateY(0)
}
40% {
-webkit-transform:rotateY(0)
}
100% {
-webkit-transform:rotateY(360deg)
}
}
@keyframes FlipInY {
0% {
-webkit-transform:rotateY(0);
transform:rotateY(0)
}
40% {
-webkit-transform:rotateY(0);
transform:rotateY(0)
}
100% {
-webkit-transform:rotateY(360deg);
transform:rotateY(360deg)
}
}
@-webkit-keyframes Bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0)
}
40% {
-webkit-transform:translateY(-30px)
}
60% {
-webkit-transform:translateY(-15px)
}
}
@keyframes Bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
40% {
-webkit-transform:translateY(-30px);
transform:translateY(-30px)
}
60% {
-webkit-transform:translateY(-15px);
transform:translateY(-15px)
}
}
@-webkit-keyframes FadeInL {
0% {
opacity:0;
-webkit-transform:translateX(-100%)
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@keyframes FadeInL {
0% {
opacity:0;
-webkit-transform:translateX(-100%);
transform:translateX(-100%)
}
100% {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@-webkit-keyframes FadeInR {
0% {
opacity:0;
-webkit-transform:translateX(100%)
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@keyframes FadeInR {
0% {
opacity:0;
-webkit-transform:translateX(100%);
transform:translateX(100%)
}
100% {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@-webkit-keyframes BounceInL {
0% {
opacity:0;
-webkit-transform:translateX(-100%)
}
15% {
opacity:1;
-webkit-transform:translateX(30px)
}
20% {
opacity:1;
-webkit-transform:translateX(-10px)
}
25% {
opacity:1;
-webkit-transform:translateX(0)
}
80% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes BounceInL {
0% {
opacity:0;
-webkit-transform:translateX(-100%);
transform:translateX(-100%)
}
15% {
opacity:1;
-webkit-transform:translateX(30px);
transform:translateX(30px)
}
20% {
opacity:1;
-webkit-transform:translateX(-10px);
transform:translateX(-10px)
}
25% {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
80% {
opacity:1
}
100% {
opacity:0
}
}
@-webkit-keyframes BounceInR {
0% {
opacity:0;
-webkit-transform:translateX(100%)
}
15% {
opacity:1;
-webkit-transform:translateX(-30px)
}
20% {
opacity:1;
-webkit-transform:translateX(10px)
}
25% {
opacity:1;
-webkit-transform:translateX(0)
}
80% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes BounceInR {
0% {
opacity:0;
-webkit-transform:translateX(100%);
transform:translateX(100%)
}
15% {
opacity:1;
-webkit-transform:translateX(-30px);
transform:translateX(-30px)
}
20% {
opacity:1;
-webkit-transform:translateX(10px);
transform:translateX(10px)
}
25% {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
80% {
opacity:1
}
100% {
opacity:0
}
}


/*定义一个名字叫heartAnimate的动画，实现心形图的放大以及旋转效果*/
@keyframes heartAnimate{ 
    0%,100%{transform:scale(1) rotate(0);}                       /*0%,100%时保持图形的原大小且不旋转*/
    10%,30%{transform: scale(0.9) rotate(3deg);}                  /*10%,30%时图形缩小成0.9倍，并且顺时针旋转3度*/
    20%,40%,60%,80%{transform:scale(1.1) rotate(-3deg);}         /*20%,40%,60%,80%时图形扩大成1.1倍，并且逆时针旋转3度*/
    50%,70%{ transform:scale(1.1) rotate(3deg);}                 /*50%,70%时图形扩大成1.1倍，并且顺时针旋转3度*/
}
@-webkit-keyframes heartAnimate{
    0%,100%{-webkit-transform: scale(1) rotate(0);}
    10%,30%{-webkit-transform:scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-webkit-transform: scale(1.1) rotate(-3deg);}
    50%,70%{-webkit-transform: scale(1.1) rotate(3deg);}
}
@-moz-keyframes heartAnimate{
    0%,100%{-moz-transform:scale(1) rotate(0);}
    10%,30%{-moz-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -moz-transform:scale(1.1) rotate(3deg);}
}
@-o-keyframes heartAnimate{
    0%,100%{-o-transform:scale(1) rotate(0);}
    10%,30%{-o-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -o-transform:scale(1.1) rotate(3deg);}
}
@-ms-keyframes heartAnimate{
    0%,100%{-ms-transform:scale(1) rotate(0);}
    10%,30%{-ms-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -ms-transform:scale(1.1) rotate(3deg);}
}