css3 @-webkit-keyframes 这种格式什么意思

最新推荐文章于 2025-05-08 11:30:00 发布

csdn_huangyumin

最新推荐文章于 2025-05-08 11:30:00 发布

阅读量1.2w

点赞数 4

分类专栏： css 文章标签： css

css 专栏收录该内容

5 篇文章

订阅专栏

@-webkit-keyframes labelON{
        0%{top: 0px;
    left: 0px;
        }
        
        100%{top: 0px;
    left: 38px;
        }
}

@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。

以楼主贴出的代码为例，前缀(the vendor prefixes)webkit表示这个动画效果只适用于webkit内核的浏览器，labelON就是这个动画里面关键帧的名字(animation-name)。0%和100%表示这个动画从开始到结束，向右移动了38px(top值不变，left值增加到38px)。