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动画效果之animation的常用样式的文章就介绍到这了,更多相关css animation的常用样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input...
ContentTypes : "ez","application/andrew-inset" ContentTypes : "hqx","applic...
PartialType 构造类型 Type ,并将它所有的属性设置为可选的。它的返回类型表示...
思路: 一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子...
突然想到的方法,来试试吧 1.页面布局 canvas id=canva width=500px height=300p...
"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和...
网页盒子模型存在两种: 1:标准W3C盒子模型; 2:IE盒子模型(IE浏览器默认的模...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
概要 本次我们会使用html5和js开发一个动态音频图 用到的技术点: (1)js (2)...
在Dreamweaver为网页添加背景音乐播放器,是丰富页面活动的重要内容。本篇教程将...