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 相关文章推荐
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5事件方法全部汇总
May 12 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
两个Javascript小tip资料
2010/11/23 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
Python实现控制台进度条功能
2016/01/04 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
党支部书记岗位责任制
2014/02/11 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书