所属分类:web前端开发
css中keyframes用于规定元素的动画动作,是一种创建动画的css规则;keyframe规则由关键字“@keyframe”组成,语法为“@keyframes 动画名{keyframes-selector{css-styles;}}”。
前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3中keyframes的用法是什么
此属性与animation属性是密切相关的。
keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题。
使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。
语法结构:
1 @keyframes animationname {keyframes-selector {css-styles;}}
登录后复制
参数解析:
animationname:声明动画的名称。
keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使用 "from" 和 "to"的形式。"from" 和 "to"的形式等价于 0% 和 100%。建议始终使用百分比形式。
示例如下:
1234567891011121314151617181920212223 <!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
5
s infinite;
}
@keyframes fadenum{
100%
{transform:rotate(
360
deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
登录后复制
输出结果:
大家感兴趣的话,可以继续访问:css视频教程。
以上就是css3中keyframes的用法是什么的详细内容,更多请关注zzsucai.com其它相关文章!