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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
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
一段php加密解密的代码
2006/10/09 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
二级域名转向类
2006/11/09 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
写自荐信要注意什么
2013/12/26 职场文书
公司道歉信范文
2014/01/09 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
Python基础详解之描述符
2021/04/28 Python
Python语言规范之Pylint的详细用法
2021/06/24 Python