@keyframes myfirst
{
0%   {transform: scale(1);top:0; right:0;}
20%  {transform: scale(0.9);top:0; right:0;opacity: 1}
90%  {transform: scale(0.9);top:-80%; right:-75%;opacity: 0.5}
100% {transform: scale(0.9);top:-100%;right: -90%;opacity: 0}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {transform: scale(1);top:0; right:0;}
20%  {transform: scale(0.9);top:0; right:0;opacity: 1}
90%  {transform: scale(0.9);top:-80%; right:-75%;opacity: 0.5}
100% {transform: scale(0.9);top:-100%;right: -90%;opacity: 0}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {transform: scale(1);top:0; right:0;}
20%  {transform: scale(0.9);top:0; right:0;opacity: 1}
90%  {transform: scale(0.9);top:-80%; right:-75%;opacity: 0.5}
100% {transform: scale(0.9);top:-100%;right: -90%;opacity: 0}
}

@-o-keyframes myfirst /* Opera */
{
0%   {transform: scale(1);top:0; right:0;}
20%  {transform: scale(0.9);top:0; right:0;opacity: 1}
90%  {transform: scale(0.9);top:-80%; right:-75%;opacity: 0.5}
100% {transform: scale(0.9);top:-100%;right: -90%;opacity: 0}
}

/*top*/
@keyframes tops
{
0%   {z-index: 9;top:0;}
100% {z-index: 9;top:-135px;}
}

@-moz-keyframes tops /* Firefox */
{
0%   {z-index: 9;top:0;}
100% {z-index: 9;top:-135px;}
}

@-webkit-keyframes tops /* Safari 和 Chrome */
{
0%   {z-index: 9;top:0;}
100% {z-index: 9;top:-135px;}
}

@-o-keyframes tops /* Opera */
{
0%   {z-index: 9;top:0;}
100% {z-index: 9;top:-135px;}
}