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和jquery
Nov 21 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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 购物车的例子
2009/05/04 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php使用google地图应用实例
2014/12/31 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
使用js画图之画切线
2015/01/12 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
详解django2中关于时间处理策略
2019/03/06 Python
python各层级目录下import方法代码实例
2020/01/20 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android