温馨提示  2024年 6月我们已经停止开发者板块文章内容更新,谢谢来访。存档数据
知识 2023-08-26 34 次阅读

css3中keyframes的用法是什么

   

css中keyframes用于规定元素的动画动作,是一种创建动画的css规则;keyframe规则由关键字“@keyframe”组成,语法为“@keyframes 动画名{keyframes-selector{css-styles;}}”。

本教程操作环境windows10系统、css3&&html5版、dell g3电脑。

css3中keyframes的用法是什么

此属性与animation属性是密切相关的。

keyframes翻译成中文,是关键帧的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题。

使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

语法结构:

@keyframes animationname {keyframes-selector {css-styles;}}

参数解析:

animationname:声明动画的名称。

keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使用 from 和 to的形式。from 和 to的形式等价于 0% 和 100%。建议始终使用百分比形式。

示例如下

<!doctype html><html lang=en><head> <meta charset=utf-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=x-ua-compatible content=ie=edge> <title>document</title> <style> div{ width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite; } @keyframes fadenum{ 100%{transform:rotate(360deg);}} </style></head><body> <div></div></body></html>

输出结果

大家感兴趣的话,可以继续访问css视频教程。