CSS animation怎么使用?(山东数漫江湖)
animation
可以为很多CSS属性添加动画,比如: color, background-color, height和width。animation的动画需要使用@keyframes
来定义,随后被animation
属性来调用。
element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
animation的子属性
animation-name
: 声明@keyframes
动画的名字animation-duration
: 动画的时间周期animation-timing-function
: 设置动画曲线,比如:ease
或者linear
animation-delay
: 元素加载后动画的开始时间animation-direction
: 设置动画的方向animation-iteration-count
: 动画需要被执行几次animation-fill-mode
: 设置动画前/后需要被设置的值animation-play-state
: 暂停/播放动画
这些子属性的用法如下:
@keyframes strech {
/* 这里声明动画 */
}
.element {
animation-name: strech;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/* 也可以这么写 */
.element {
animation:
strech
1.5s
ease-out
0s
alternate
infinite
none
running;
}
下面是这些子属性的值:
属性 | 值 |
---|---|
animation-timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
animation-duration | Xs 或 Xms |
animation-delay | Xs 或 Xms |
animation-iteration-count | X |
animation-fill-mode | forwards, backwards, both, none |
animation-direction | normal, alternate |
animation-play-state | paused, running, running |
多个步骤
如果动画开始和结束的状态一样,那么可以这么写:
@keyframes pulse {
0%, 100% {
background-color: yellow;
}
50% {
background-color: red;
}
}
多个动画
可以用在选择器上用逗号分割来声明多个动画, 比如下面的代码,在切换颜色的时候同时移动:
.element {
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
}
@keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}
@keyframes nudge {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
性能
大多数的animation属性有性能问题,所以在给这些属性添加动画时要谨慎。但是以下几个属性是安全的:
- transform: translate()
- transform: scale()
- transform: rotate()
- opacity
什么属性可以添加动画?
MDN有个一个可以添加动画的列表。可以添加动画的属性一般为颜色和数字。
浏览器兼容性
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
6+ | 5+ | 5+ | 12+ | 10+ | 4.4+ |
CSS animation怎么使用?(山东数漫江湖)的更多相关文章
- Vue前端开发规范(山东数漫江湖)
一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: expor ...
- Spring+SpringMVC+MyBatis整合(山东数漫江湖)
Spring+SpringMVC+MyBatis(SSM)在我们项目中是经常用到的,这篇文章主要讲解使用Intellij IDEA整合SSM,具体环境如下: 数据库:MySQL5.7 依赖管理:Mav ...
- 教你 Shiro 整合 SpringBoot,避开各种坑(山东数漫江湖)
依赖包 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-sprin ...
- NodeJS 微信公共号开发 - 响应微信发送的Token验证(山东数漫江湖)
背景 使用 NodeJS 进行微信公共号开发,首先需要响应微信发送的Token验证,官方文档 填写服务器配置 登录微信公共平台,在开发下的基本配置打开该页面. 依次填写接口的 URL.自定义的 Tok ...
- 老生常谈-Activity(山东数漫江湖)
对于activity的七个声生命周期回调,总是被大家翻来覆去的说,甚至说的都有些厌烦了,这部分知识虽然基础但也很重要,谁都不想在面试的时候只说出个一知半解,下面的分析是对阅读<安卓开发艺术探索& ...
- Web Session 浅入浅出(山东数漫江湖)
使用过几种Web App开发语言和框架,都会接触到Session的概念.即使是一个简单站点访问计数的功能,也常常使用Session来实现的.其他常用的领域还有购物车,登录用户等.但是,对Session ...
- 炒鸡简单的canvas粒子(山东数漫江湖)
位图的canvas一直不会被svg比下去的原因了. 俗话说,须弥芥子,是大小之说,也有以小见大之说,颗颗粒子,足以构建宏大效果. 这是一篇炒鸡简单的canvas粒子教程,主要是讲如何粒子特效的原理,一 ...
- Vue 使用中的小技巧(山东数漫江湖)
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1. 多图表resize事件去中心 ...
- Hadoop和大数据:60款顶级开源工具(山东数漫江湖)
说到处理大数据的工具,普通的开源解决方案(尤其是Apache Hadoop)堪称中流砥柱.弗雷斯特调研公司的分析师Mike Gualtieri最近预测,在接下来几年,“100%的大公司”会采用Hado ...
随机推荐
- SpringMVC拦截器实现登录认证(转发)
感谢原作者,转发自:http://blog.csdn.net/u014427391/article/details/51419521 以Demo的形式讲诉拦截器的使用 项目结构如图: 需要的jar:有 ...
- lol佐伊美图
心血来潮,分享一波从各个网站上搜集到的佐伊美图,持续更新!(最近更新日期:2019/03/17) Section1 暮光星灵 2018/11/16 2019/02/15 2019/03/17 Se ...
- node必学的Hello World实现--服务器实现
node是JavaScript运行在后端的一种实现.而后端语言,不管是php,java都需要一个服务器才能跑起来,node如是. node的服务器较php而言,少了单独安装服务器的步骤,node的服务 ...
- ASP.NET MVC 多语言解决方案
1:打开VS,新建ASP.NET MVC4项目 2:创建一个放本地化资源的文件夹并命名为"Language",右键选择添加新项,选择资源文件并命名为"Com" ...
- 【bzoj2502】清理雪道 有上下界最小流
题目描述 滑雪场坐落在FJ省西北部的若干座山上. 从空中鸟瞰,滑雪场可以看作一个有向无环图,每条弧代表一个斜坡(即雪道),弧的方向代表斜坡下降的方向. 你的团队负责每周定时清理雪道.你们拥有一架直升飞 ...
- [洛谷P5205]【模板】多项式开根
题目大意:给你$n$项多项式$A(x)$,求出$B(x)$满足$B^2(x)\equiv A(x)\pmod{x^n}$ 题解:考虑已经求出$B_0(x)$满足$B_0^2(x)\equiv A(x) ...
- [洛谷P4035][JSOI2008]球形空间产生器
题目大意:给你$n$个点坐标,要你求出圆心 题解:随机化,可以随机一个点当圆心,然后和每个点比较,求出平均距离$r$,如果到这个点的距离大于$r$,说明离这个点远了,就给圆心施加一个向这个点的力:若小 ...
- CF#498 1006F Xor-Paths
题意:一个n * m的矩阵,求从左上走到右下经过的数异或和为k的方案数. 题解: 因为数据范围较小,所以我们可以采用meet in the middle过掉此题... 然而define inf LL ...
- BZOJ1861:[ZJOI2006]书架——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1861 (题面复制于洛谷) 题目描述 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上 ...
- LOJ6388:[THUPC2018]赛艇——题解
https://loj.ac/problem/6388 如果你做过BZOJ5217:[Lydsy2017省队十连测]航海舰队的话,那么恭喜你,这道题就是大水题. 如果你做过BZOJ4259:残缺的字符 ...