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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 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 数组实例说明
2008/08/18 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP如何实现跨域
2016/05/30 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python的时间模块datetime详解
2017/04/17 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
美德好少年事迹材料
2014/01/19 职场文书
校园之星获奖感言
2014/01/29 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
租房安全协议书
2014/08/20 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书