首页 > 作文

CSS3 @keyframes简单动画实现

更新时间:2023-04-06 21:33:37 阅读: 评论:0

css3 @keyframes简单动画实现

定义:

通过 @keyframes 规则,能够创建动画。

创建动画的原理是,将一套 css 样式逐渐变化为另一套样式。

在动画过程中,可以多次改变这套 css 样式。

以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。

0% 是动画的开始时间,100% 动画的结束时间。

为了获得最佳的浏览器支持,应始终定义 0% 和 100% 选择器。

重要:兼容问题!@keyfrmes 不兼容ie 9 and 以及更早版本的浏览器.

语法:

@keyframes animationname22公里是多少米 {keyframes-lector {css-styles;}}

animationname必需时间核对。定义动画的名称。keyframes-lector

必需。动画时长的百分比。

合法的值:

0-100%from(与 0% 相同)to(与 100% 相同)css-styles必需。一个或多个合法的 css 样式属性。
@keyframes mymove{    0%   {top:0px;}    25%  {top:200px;}    想念圣诞节75%  {top:50px}    100% {top:100px;}}@-webkit-keyframes mymove /* safari and chrome */{    0%   {top:0px;}    25%  {top:200px;}    75%  {top:50px}    100% {top:100px;}}//多个特性变化,用;隔开.@-webkit-keyframes mymove{0% {top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; b保健食品管理ackground:red;}}

使用mymove动画方法:

选择器

{    animation:mymove 5s infinite;    -webkit-animation:mymove 5s infinite; /* safari and chrome铁皮鼓读后感, infinite表示无限次循环,也可设置次数n:                                           animation-interation-count:n*/ }

总结:@keyframes与animation密切相关,如想透彻掌握,还需对照animation用法一起学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。

本文发布于:2023-04-06 21:33:36,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/b9ed75f1472a357ce20f894a2571ece0.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS3 @keyframes简单动画实现.doc

本文 PDF 下载地址:CSS3 @keyframes简单动画实现.pdf

标签:动画   样式   多个   定义
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图