云海网博客杂谈

定义动画的名称

animation: x-e-content-a 10s infinite linear;

x-e-content-a标识动画

infinite无限循环

@keyframes x-e-content-a{

0%{

/* background-position:0 0; */

}

100%{

background-position:-260px 0;

}

}

从0%-100%

@keyframes mymove{}

@-moz-keyframes mymove /* Firefox */{}

@-webkit-keyframes mymove /* Safari and Chrome */{}

@-o-keyframes mymove /* Opera */{}

transform:rotate(45deg)使矩形旋转

transform-origin:20% 40%;旋转的基点位置

transform: rotate(45deg);

transform-origin:20% 40%;

-ms-transform: rotate(45deg); /* IE 9 */

-ms-transform-origin:20% 40%; /* IE 9 */

-webkit-transform: rotate(45deg); /* Safari and Chrome */

-webkit-transform-origin:20% 40%; /* Safari and Chrome */

-moz-transform: rotate(45deg); /* Firefox */

-moz-transform-origin:20% 40%; /* Firefox */

-o-transform: rotate(45deg); /* Opera */

-o-transform-origin:20% 40%; /* Opera */

过渡动画（一般在hover事件上执行一段动画后结束）

transition:height 2s,width  2s;

-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */

-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

旋转动画

transform:rotate(360deg);

-moz-transform:rotate(360deg); /* Firefox 4 */

-webkit-transform:rotate(360deg); /* Safari and Chrome */

-o-transform:rotate(360deg); /* Opera */