css3基本动画

程序员文章站 2022-03-16 16:42:35

...

上下左右晃动
.tada {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
animation-name: wobble;
}
.animate {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes wobble
{
0%
{
-webkit-transform: translateX(0%);
}

15%
{
    -webkit-transform: translateX(-10%) rotate(-5deg);
}

30%
{
    -webkit-transform: translateX(8%) rotate(4deg);
}

45%
{
    -webkit-transform: translateX(-6%) rotate(-3deg);
}

60%
{
    -webkit-transform: translateX(4%) rotate(2deg);
}

75%
{
    -webkit-transform: translateX(-2%) rotate(-1deg);
}

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

}

吊牌左右晃动
.tada {
-webkit-animation-name: swing;
-moz-animation-name: swing;
animation-name: swing;
}
.animate {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes swing
{
0%
{
-webkit-transform: rotate(10deg);
}

25%
{
    -webkit-transform: rotate(-8deg);
}

50%
{
    -webkit-transform: rotate(5deg);
}

75%
{
    -webkit-transform: rotate(-5deg);
}

100%
{
    -webkit-transform: rotate(0deg);
}

}
由大变小左右晃动
.tada {
-webkit-animation-name: tada;
-moz-animation-name: tada;
animation-name: tada;
}
.animate {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes tada
{
0%
{
-webkit-transform: scale(1);
}

10%,
20%
{
    -webkit-transform: scale(.8) rotate(-2deg);
}

30%,
50%,
70%,
90%
{
    -webkit-transform: scale(1.04) rotate(2deg);
}

40%,
60%,
80%
{
    -webkit-transform: scale(1.04) rotate(-2deg);
}

100%
{
    -webkit-transform: scale(1) rotate(0);
}

}
上下抖动
.element-animation{
animation: animationFrames linear 0.8s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 0.8s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 0.8s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 0.8s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 0.8s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
transform: translate(0px,0px) ;
}
15% {
transform: translate(0px,-25px) ;
}
30% {
transform: translate(0px,0px) ;
}
45% {
transform: translate(0px,-15px) ;
}
60% {
transform: translate(0px,0px) ;
}
75% {
transform: translate(0px,-5px) ;
}
100% {
transform: translate(0px,0px) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) ;
}
15% {
-moz-transform: translate(0px,-25px) ;
}
30% {
-moz-transform: translate(0px,0px) ;
}
45% {
-moz-transform: translate(0px,-15px) ;
}
60% {
-moz-transform: translate(0px,0px) ;
}
75% {
-moz-transform: translate(0px,-5px) ;
}
100% {
-moz-transform: translate(0px,0px) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) ;
}
15% {
-webkit-transform: translate(0px,-25px) ;
}
30% {
-webkit-transform: translate(0px,0px) ;
}
45% {
-webkit-transform: translate(0px,-15px) ;
}
60% {
-webkit-transform: translate(0px,0px) ;
}
75% {
-webkit-transform: translate(0px,-5px) ;
}
100% {
-webkit-transform: translate(0px,0px) ;
}
}

@-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) ;
}
15% {
-o-transform: translate(0px,-25px) ;
}
30% {
-o-transform: translate(0px,0px) ;
}
45% {
-o-transform: translate(0px,-15px) ;
}
60% {
-o-transform: translate(0px,0px) ;
}
75% {
-o-transform: translate(0px,-5px) ;
}
100% {
-o-transform: translate(0px,0px) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) ;
}
15% {
-ms-transform: translate(0px,-25px) ;
}
30% {
-ms-transform: translate(0px,0px) ;
}
45% {
-ms-transform: translate(0px,-15px) ;
}
60% {
-ms-transform: translate(0px,0px) ;
}
75% {
-ms-transform: translate(0px,-5px) ;
}
100% {
-ms-transform: translate(0px,0px) ;
}
}

左右晃动
.element-animation{
animation: animationFrames linear 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
15% {
transform: translate(-25px,0px) rotate(-5deg) ;
}
30% {
transform: translate(20px,0px) rotate(3deg) ;
}
45% {
transform: translate(-15px,0px) rotate(-3deg) ;
}
60% {
transform: translate(10px,0px) rotate(2deg) ;
}
75% {
transform: translate(-5px,0px) rotate(-1deg) ;
}
100% {
transform: translate(0px,0px) rotate(0deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
15% {
-moz-transform: translate(-25px,0px) rotate(-5deg) ;
}
30% {
-moz-transform: translate(20px,0px) rotate(3deg) ;
}
45% {
-moz-transform: translate(-15px,0px) rotate(-3deg) ;
}
60% {
-moz-transform: translate(10px,0px) rotate(2deg) ;
}
75% {
-moz-transform: translate(-5px,0px) rotate(-1deg) ;
}
100% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
15% {
-webkit-transform: translate(-25px,0px) rotate(-5deg) ;
}
30% {
-webkit-transform: translate(20px,0px) rotate(3deg) ;
}
45% {
-webkit-transform: translate(-15px,0px) rotate(-3deg) ;
}
60% {
-webkit-transform: translate(10px,0px) rotate(2deg) ;
}
75% {
-webkit-transform: translate(-5px,0px) rotate(-1deg) ;
}
100% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
}

@-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
15% {
-o-transform: translate(-25px,0px) rotate(-5deg) ;
}
30% {
-o-transform: translate(20px,0px) rotate(3deg) ;
}
45% {
-o-transform: translate(-15px,0px) rotate(-3deg) ;
}
60% {
-o-transform: translate(10px,0px) rotate(2deg) ;
}
75% {
-o-transform: translate(-5px,0px) rotate(-1deg) ;
}
100% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
15% {
-ms-transform: translate(-25px,0px) rotate(-5deg) ;
}
30% {
-ms-transform: translate(20px,0px) rotate(3deg) ;
}
45% {
-ms-transform: translate(-15px,0px) rotate(-3deg) ;
}
60% {
-ms-transform: translate(10px,0px) rotate(2deg) ;
}
75% {
-ms-transform: translate(-5px,0px) rotate(-1deg) ;
}
100% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
}

放大缩小
.element-animation{
animation: animationFrames linear 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
opacity:1;
transform: scaleX(1.00) scaleY(1.00) ;
}
25% {
opacity:1;
transform: scaleX(0.95) scaleY(0.95) ;
}
50% {
opacity:1;
transform: scaleX(1.10) scaleY(1.10) ;
}
100% {
opacity:0;
transform: scaleX(0.30) scaleY(0.30) ;
}
}

@-moz-keyframes animationFrames{
0% {
opacity:1;
-moz-transform: scaleX(1.00) scaleY(1.00) ;
}
25% {
opacity:1;
-moz-transform: scaleX(0.95) scaleY(0.95) ;
}
50% {
opacity:1;
-moz-transform: scaleX(1.10) scaleY(1.10) ;
}
100% {
opacity:0;
-moz-transform: scaleX(0.30) scaleY(0.30) ;
}
}

@-webkit-keyframes animationFrames {
0% {
opacity:1;
-webkit-transform: scaleX(1.00) scaleY(1.00) ;
}
25% {
opacity:1;
-webkit-transform: scaleX(0.95) scaleY(0.95) ;
}
50% {
opacity:1;
-webkit-transform: scaleX(1.10) scaleY(1.10) ;
}
100% {
opacity:0;
-webkit-transform: scaleX(0.30) scaleY(0.30) ;
}
}

@-o-keyframes animationFrames {
0% {
opacity:1;
-o-transform: scaleX(1.00) scaleY(1.00) ;
}
25% {
opacity:1;
-o-transform: scaleX(0.95) scaleY(0.95) ;
}
50% {
opacity:1;
-o-transform: scaleX(1.10) scaleY(1.10) ;
}
100% {
opacity:0;
-o-transform: scaleX(0.30) scaleY(0.30) ;
}
}

@-ms-keyframes animationFrames {
0% {
opacity:1;
-ms-transform: scaleX(1.00) scaleY(1.00) ;
}
25% {
opacity:1;
-ms-transform: scaleX(0.95) scaleY(0.95) ;
}
50% {
opacity:1;
-ms-transform: scaleX(1.10) scaleY(1.10) ;
}
100% {
opacity:0;
-ms-transform: scaleX(0.30) scaleY(0.30) ;
}
}

元素出现
.element-animation{
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /when the spec is finished/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /Chrome 16+, Safari 4+/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /FF 5+/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /Not implemented yet/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /IE 10+/
}

@keyframes animationFrames{
0% {
opacity:0;
transform: translate(0px,-25px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}

@-moz-keyframes animationFrames{
0% {
opacity:0;
-moz-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}

@-webkit-keyframes animationFrames {
0% {
opacity:0;
-webkit-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}

@-o-keyframes animationFrames {
0% {
opacity:0;
-o-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}

@-ms-keyframes animationFrames {
0% {
opacity:0;
-ms-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}

左右抖动
.element-animation{
animation: animationFrames linear 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
transform: translate(0px,0px) ;
}
10% {
transform: translate(-10px,0px) ;
}
20% {
transform: translate(10px,0px) ;
}
30% {
transform: translate(-10px,0px) ;
}
40% {
transform: translate(10px,0px) ;
}
50% {
transform: translate(-10px,0px) ;
}
60% {
transform: translate(10px,0px) ;
}
70% {
transform: translate(-10px,0px) ;
}
80% {
transform: translate(10px,0px) ;
}
90% {
transform: translate(-10px,0px) ;
}
100% {
transform: translate(0px,0px) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) ;
}
10% {
-moz-transform: translate(-10px,0px) ;
}
20% {
-moz-transform: translate(10px,0px) ;
}
30% {
-moz-transform: translate(-10px,0px) ;
}
40% {
-moz-transform: translate(10px,0px) ;
}
50% {
-moz-transform: translate(-10px,0px) ;
}
60% {
-moz-transform: translate(10px,0px) ;
}
70% {
-moz-transform: translate(-10px,0px) ;
}
80% {
-moz-transform: translate(10px,0px) ;
}
90% {
-moz-transform: translate(-10px,0px) ;
}
100% {
-moz-transform: translate(0px,0px) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) ;
}
10% {
-webkit-transform: translate(-10px,0px) ;
}
20% {
-webkit-transform: translate(10px,0px) ;
}
30% {
-webkit-transform: translate(-10px,0px) ;
}
40% {
-webkit-transform: translate(10px,0px) ;
}
50% {
-webkit-transform: translate(-10px,0px) ;
}
60% {
-webkit-transform: translate(10px,0px) ;
}
70% {
-webkit-transform: translate(-10px,0px) ;
}
80% {
-webkit-transform: translate(10px,0px) ;
}
90% {
-webkit-transform: translate(-10px,0px) ;
}
100% {
-webkit-transform: translate(0px,0px) ;
}
}

@-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) ;
}
10% {
-o-transform: translate(-10px,0px) ;
}
20% {
-o-transform: translate(10px,0px) ;
}
30% {
-o-transform: translate(-10px,0px) ;
}
40% {
-o-transform: translate(10px,0px) ;
}
50% {
-o-transform: translate(-10px,0px) ;
}
60% {
-o-transform: translate(10px,0px) ;
}
70% {
-o-transform: translate(-10px,0px) ;
}
80% {
-o-transform: translate(10px,0px) ;
}
90% {
-o-transform: translate(-10px,0px) ;
}
100% {
-o-transform: translate(0px,0px) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) ;
}
10% {
-ms-transform: translate(-10px,0px) ;
}
20% {
-ms-transform: translate(10px,0px) ;
}
30% {
-ms-transform: translate(-10px,0px) ;
}
40% {
-ms-transform: translate(10px,0px) ;
}
50% {
-ms-transform: translate(-10px,0px) ;
}
60% {
-ms-transform: translate(10px,0px) ;
}
70% {
-ms-transform: translate(-10px,0px) ;
}
80% {
-ms-transform: translate(10px,0px) ;
}
90% {
-ms-transform: translate(-10px,0px) ;
}
100% {
-ms-transform: translate(0px,0px) ;
}
}

旋转
.element-animation{
animation: animationFrames linear 0.7s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 0.7s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 0.7s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 0.7s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 0.7s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
opacity:0;
transform: rotate(-200deg) ;
}
100% {
opacity:1;
transform: rotate(0deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
opacity:0;
-moz-transform: rotate(-200deg) ;
}
100% {
opacity:1;
-moz-transform: rotate(0deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
opacity:0;
-webkit-transform: rotate(-200deg) ;
}
100% {
opacity:1;
-webkit-transform: rotate(0deg) ;
}
}

@-o-keyframes animationFrames {
0% {
opacity:0;
-o-transform: rotate(-200deg) ;
}
100% {
opacity:1;
-o-transform: rotate(0deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
opacity:0;
-ms-transform: rotate(-200deg) ;
}
100% {
opacity:1;
-ms-transform: rotate(0deg) ;
}
}
掉下去的感觉
.element-animation{
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 0% 0%;
animation-fill-mode:forwards; /when the spec is finished/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /Chrome 16+, Safari 4+/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 0% 0%;
-moz-animation-fill-mode:forwards; /FF 5+/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 0% 0%;
-o-animation-fill-mode:forwards; /Not implemented yet/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 0% 0%;
-ms-animation-fill-mode:forwards; /IE 10+/
}

@keyframes animationFrames{
0% {
transform: rotate(0deg) ;
}
20% {
transform: rotate(60deg) ;
}
40% {
transform: rotate(40deg) ;
}
60% {
transform: rotate(54deg) ;
}
80% {
transform: rotate(42deg) ;
}
100% {
transform: rotate(46deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform: rotate(0deg) ;
}
20% {
-moz-transform: rotate(60deg) ;
}
40% {
-moz-transform: rotate(40deg) ;
}
60% {
-moz-transform: rotate(54deg) ;
}
80% {
-moz-transform: rotate(42deg) ;
}
100% {
-moz-transform: rotate(46deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
20% {
-webkit-transform: rotate(60deg) ;
}
40% {
-webkit-transform: rotate(40deg) ;
}
60% {
-webkit-transform: rotate(54deg) ;
}
80% {
-webkit-transform: rotate(42deg) ;
}
100% {
-webkit-transform: rotate(46deg) ;
}
}

@-o-keyframes animationFrames {
0% {
-o-transform: rotate(0deg) ;
}
20% {
-o-transform: rotate(60deg) ;
}
40% {
-o-transform: rotate(40deg) ;
}
60% {
-o-transform: rotate(54deg) ;
}
80% {
-o-transform: rotate(42deg) ;
}
100% {
-o-transform: rotate(46deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(0deg) ;
}
20% {
-ms-transform: rotate(60deg) ;
}
40% {
-ms-transform: rotate(40deg) ;
}
60% {
-ms-transform: rotate(54deg) ;
}
80% {
-ms-transform: rotate(42deg) ;
}
100% {
-ms-transform: rotate(46deg) ;
}
}

从左出现
.element-animation{
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /when the spec is finished/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /Chrome 16+, Safari 4+/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /FF 5+/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /Not implemented yet/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /IE 10+/
}

@keyframes animationFrames{
0% {
opacity:0;
transform: translate(-1500px,0px) ;
}
60% {
opacity:1;
transform: translate(30px,0px) ;
}
80% {
transform: translate(-10px,0px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}

@-moz-keyframes animationFrames{
0% {
opacity:0;
-moz-transform: translate(-1500px,0px) ;
}
60% {
opacity:1;
-moz-transform: translate(30px,0px) ;
}
80% {
-moz-transform: translate(-10px,0px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}

@-webkit-keyframes animationFrames {
0% {
opacity:0;
-webkit-transform: translate(-1500px,0px) ;
}
60% {
opacity:1;
-webkit-transform: translate(30px,0px) ;
}
80% {
-webkit-transform: translate(-10px,0px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}

@-o-keyframes animationFrames {
0% {
opacity:0;
-o-transform: translate(-1500px,0px) ;
}
60% {
opacity:1;
-o-transform: translate(30px,0px) ;
}
80% {
-o-transform: translate(-10px,0px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}

@-ms-keyframes animationFrames {
0% {
opacity:0;
-ms-transform: translate(-1500px,0px) ;
}
60% {
opacity:1;
-ms-transform: translate(30px,0px) ;
}
80% {
-ms-transform: translate(-10px,0px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}

左右晃动
.element-animation{
animation: animationFrames linear 1s;
animation-iteration-count: 1;
transform-origin: 50% 0%;
-webkit-animation: animationFrames linear 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 0%;
-moz-animation: animationFrames linear 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 0%;
-o-animation: animationFrames linear 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 0%;
-ms-animation: animationFrames linear 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 0%;
}

@keyframes animationFrames{
0% {
transform: rotate(0deg) ;
}
20% {
transform: rotate(15deg) ;
}
40% {
transform: rotate(-10deg) ;
}
60% {
transform: rotate(5deg) ;
}
80% {
transform: rotate(-5deg) ;
}
100% {
transform: rotate(0deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform: rotate(0deg) ;
}
20% {
-moz-transform: rotate(15deg) ;
}
40% {
-moz-transform: rotate(-10deg) ;
}
60% {
-moz-transform: rotate(5deg) ;
}
80% {
-moz-transform: rotate(-5deg) ;
}
100% {
-moz-transform: rotate(0deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
20% {
-webkit-transform: rotate(15deg) ;
}
40% {
-webkit-transform: rotate(-10deg) ;
}
60% {
-webkit-transform: rotate(5deg) ;
}
80% {
-webkit-transform: rotate(-5deg) ;
}
100% {
-webkit-transform: rotate(0deg) ;
}
}

@-o-keyframes animationFrames {
0% {
-o-transform: rotate(0deg) ;
}
20% {
-o-transform: rotate(15deg) ;
}
40% {
-o-transform: rotate(-10deg) ;
}
60% {
-o-transform: rotate(5deg) ;
}
80% {
-o-transform: rotate(-5deg) ;
}
100% {
-o-transform: rotate(0deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(0deg) ;
}
20% {
-ms-transform: rotate(15deg) ;
}
40% {
-ms-transform: rotate(-10deg) ;
}
60% {
-ms-transform: rotate(5deg) ;
}
80% {
-ms-transform: rotate(-5deg) ;
}
100% {
-ms-transform: rotate(0deg) ;
}
}

旋转消失
.element-animation{
animation: animationFrames linear 0.7s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 0.7s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 0.7s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 0.7s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 0.7s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
opacity:1;
transform: rotate(0deg) ;
}
100% {
opacity:0;
transform: rotate(200deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
opacity:1;
-moz-transform: rotate(0deg) ;
}
100% {
opacity:0;
-moz-transform: rotate(200deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
opacity:1;
-webkit-transform: rotate(0deg) ;
}
100% {
opacity:0;
-webkit-transform: rotate(200deg) ;
}
}

@-o-keyframes animationFrames {
0% {
opacity:1;
-o-transform: rotate(0deg) ;
}
100% {
opacity:0;
-o-transform: rotate(200deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
opacity:1;
-ms-transform: rotate(0deg) ;
}
100% {
opacity:0;
-ms-transform: rotate(200deg) ;
}
}

上一篇： CSS3-animation动画属性

下一篇： HBase Filter使用方法（一）

css3基本动画

AE怎么做动图?AE制作几何图形变换动画的教程

AE怎么制作火柴人动画? ae火柴人动画的制作教程

Linux下ps命令的10个基本例子

AE怎么制作硬币悬浮的动画效果?

Linux基本命令学习之linux cd命令详解

ae怎么制作Y轴的旋转动画?

会声会影X10怎么制作折扇展开的动画效果?

Audition CS6怎么生成基本音色?

AE怎么制作3D硬币翻转的动画效果?

AE怎么制作一个文字逐渐放大的动画?