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 相关文章推荐
css3学习之2D转换功能详解
Dec 23 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP防盗链代码实例
2014/08/27 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
菜单效果
2006/10/14 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python和js交互调用的方法
2020/06/23 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
单位提档介绍信
2014/01/17 职场文书
高中社区服务活动报告
2015/02/05 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
《植树问题》教学反思
2016/03/03 职场文书
创业计划书之电动车企业
2019/10/11 职场文书