这个样的css格式的什么意思@-webkit-keyframes turn {0%{-webkit-transform:rotateX(90deg);}20%{-webkit-transform:rotateX(-30deg) rotateY(10deg);}35%{-webkit-transform:rotateX(20deg) rotateY(-3deg);}55%{-webkit-transform:rotateX(-15deg) rotateY

这个样的css格式的什么意思@-webkit-keyframes turn {0%{-webkit-transform:rotateX(90deg);}20%{-webkit-transform:rotateX(-30deg) rotateY(10deg);}35%{-webkit-transform:rotateX(20deg) rotateY(-3deg);}55%{-webkit-transform:rotateX(-15deg) rotateY
这个样的css格式的什么意思
@-webkit-keyframes turn {
0%{
-webkit-transform:rotateX(90deg);
}
20%{
-webkit-transform:rotateX(-30deg) rotateY(10deg);
}
35%{
-webkit-transform:rotateX(20deg) rotateY(-3deg);
}
55%{
-webkit-transform:rotateX(-15deg) rotateY(8deg);
}
85%{
-webkit-transform:rotateX(20deg) rotateY(-2deg);
}
100%{
-webkit-transform:rotateX(0);
}
}
@-moz-keyframes turn {
0%{
-moz-transform:rotateX(90deg);
}
20%{
-moz-transform:rotateX(-30deg) rotateY(10deg);
}
35%{
-moz-transform:rotateX(20deg) rotateY(-3deg);
}
55%{
-moz-transform:rotateX(-15deg) rotateY(8deg);
}
85%{
-moz-transform:rotateX(20deg) rotateY(-2deg);
}
100%{
-moz-transform:rotateX(0);
}
}
@-ms-keyframes turn {
0%{
-ms-transform:rotateX(90deg);
}
20%{
-ms-transform:rotateX(-30deg) rotateY(10deg);
}
35%{
-ms-transform:rotateX(20deg) rotateY(-3deg);
}
55%{
-ms-transform:rotateX(-15deg) rotateY(8deg);
}
85%{
-ms-transform:rotateX(20deg) rotateY(-2deg);
}
100%{
-ms-transform:rotateX(0);
}
}
@keyframes turn {
0%{
transform:rotateX(90deg);
}
20%{
transform:rotateX(-30deg) rotateY(10deg);
}
35%{
transform:rotateX(20deg) rotateY(-3deg);
}
55%{
transform:rotateX(-15deg) rotateY(8deg);
}
85%{
transform:rotateX(20deg) rotateY(-2deg);
}
100%{
transform:rotateX(0);
}
}

这个样的css格式的什么意思@-webkit-keyframes turn {0%{-webkit-transform:rotateX(90deg);}20%{-webkit-transform:rotateX(-30deg) rotateY(10deg);}35%{-webkit-transform:rotateX(20deg) rotateY(-3deg);}55%{-webkit-transform:rotateX(-15deg) rotateY
css3
@keyframes(关键帧)作为CSS3动画的一部分,其该紧跟一个标识符(由开发者自定),此标识符将在其他CSS代码中引用.在@keyframes和标识符之后,就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了.这一系列动画规则用大括号括起来隔开,然后再嵌在@keyframes之后的大括号里,类似其他@语法规则.
以楼主贴出的代码为例,前缀-webkit表示这适用于webkit内核的浏览器,-moz是火狐,-ms的是IE的,最后一段是原型代码.这4段其实是对4种浏览器的兼容,后面turn就是这个动画里面关键帧的名字(animation-name).所以我们取任一段出来看：
@keyframes turn {
0%{
transform: rotateX(90deg);
}
20%{
transform: rotateX(-30deg) rotateY(10deg);
}
35%{
transform: rotateX(20deg) rotateY(-3deg);
}
55%{
transform: rotateX(-15deg) rotateY(8deg);
}
85%{
transform: rotateX(20deg) rotateY(-2deg);
}
100%{
transform: rotateX(0);
}
}
0%~100%表示这个动画从开始到结束的每个时间段,这里定义了每个时间段翻转的度数,所以连贯起来就会左摇右摆之类的.css3已经具有动画的雏形了.