css3中keyframes的用法是什么

发布时间:2024-02-21
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% %u548c 100%%u3002建议始终使用百分比形式。
示例如下:
<!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视频教程。
上一个:布朗山古茶山:探秘西双版纳普洱茶土豪村老班章与新班章
下一个:结婚不到两年离婚彩礼能拿回吗

华为4x电信版移动卡上网怎么设置,我的华为手机用移动卡怎么上不了网你们可以告诉我怎么弄吗
如何解决php sqlite 乱码问题
购买茶叶时怎样区别茶叶的优劣呢?
电脑关机太慢怎么解决办法(电脑关机好慢是什么原因呢-)
阻抗元件的标注
如何对竞业限制进行限定
强制猥亵、侮辱罪的构成要件有哪些?
阻燃电话线ZR-HYV阻燃电话线报价
PLC、DCS、FCS三大控制系统的特点、性能和差异分析
联想的移动固态硬盘怎么样,联想ZX1 Pro移动固态硬盘