网页制作 
首页 > 网页制作 > 浏览文章

css动画效果之animation的常用样式

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

animation动画

定义一个动画:

/*设置一个关键帧,定义动画每一步执行的动作*/
@keyframes mybox{
            0%{transform: translate(0,0);}
            25%{transform: translate(200px,0);}
            50%{transform: translate(200px,200px);}
            75%{transform: translate(0,200px);}
            100%{transform: translate(0,0);}
        }
/*引用关键帧,设置动画的执行样式*/
animation: mybox 5s 1s infinite;

注:

1、动画结束后回到初始位置。
2、from->0%    to ->100%

animation-name: 动画的名字,(必须存在)

animation-duration: 动画持续的时间

animation-delay:规定多长时间后出现动画效果

animation-iteration-count: 定义动画执行的次数

默认值是:1; 无限次数:infinite

animation-timing-function: 定义动画的效果animation-fill-mode:

none:默认值;  样式在延迟之后生效;
backwards:  样式在延迟之前生效;
forwards: 在动画结束之后,停在终点位置;
both:  具备backwards和forwards的特性;

总结

上一篇:使用css的filter写鼠标滑过效果的实现示例
下一篇:使用CSS3实现字体颜色渐变的实现
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap