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实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
详解CSS玩转图片Base64编码
May 25 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
可靠的数据流传输TCP
2016/03/15 面试题
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL