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


Posted in HTML / CSS onMarch 09, 2021

/*设置一个关键帧,定义动画每一步执行的动作*/
@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的特性;

HTML / CSS 相关文章推荐
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
纯CSS3实现质感细腻丝滑按钮
Mar 09 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
CSS心形加载的动画源码的实现
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
详解CSS样式中的 !important * _ 符号
a标签的css样式四个状态
Mar 09 #HTML / CSS
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
You might like
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
详解vue组件中使用路由方法
2019/02/12 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python中的元组介绍
2019/01/28 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python中time、datetime模块的使用
2020/12/14 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
人力资源总监工作说明
2014/03/03 职场文书
上课说话检讨书500字
2014/11/01 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年预算员工作总结
2015/05/14 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python