css动画 aniamtion & @keyframes
MDN-animation文档
animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] [fill-mode] [play-state]
初始值
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
/*定义动画规则,声明规则名*/
@keyframes test {
0% {
margin-left: 0px;
}
100% {
margin-left: 200px;
}
}
p:hover {
animation-name: test; 动画名称 [name]
animation-duration: 1s; 规定动画完成一个周期所花费的秒或毫秒 [duration]
animation-timing-function: linear; 规定动画的速度曲线 [timing-function]
animation-delay: 0; 规定动画何时开始 [delay]
animation-iteration-count: 2; 规定动画被播放的次数 [iteration-count]
animation-direction: alternate; 规定动画是否在下一周期逆向地播放 [direction]
}
@keyframes ani{
0% {
height: 200px;
}
40%, 70%{
height: 500px;
}
100% {
height:600px;
}
}
jsrun地址
css动画 aniamtion & @keyframes的更多相关文章
- CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...
- 关键帧动画:@keyframes
关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- css动画结束后 js无法修改translated值 .
由于项目的需要,俺要做一些页面的转场动画. 即将是移动端,肯定是首先css动画了. 结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性trans ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
随机推荐
- jsp使用c:forEach报错 javax.servlet.jsp.PageContext.getELContext()Ljavax/el/ELContext的问题
今天发现了一个折磨我一天的问题: 在jsp文件中使用 <c:forEach items="${checkResult}" var="item"> & ...
- 简单JNI使用demo
android中使用JNI的小例子,直接上代码. 首先是Java类JniClient,定义native方法,User实体类就不上代码了,就简单定义了三个属性,name.age.sex. package ...
- V8 下的垃圾回收机制
V8 实现了准确式 GC,GC 算法采用了分代式垃圾回收机制.因此,V8 将内存(堆)分为新生代和老生代两部分. 1.新生代算法 新生代中的对象一般存活时间较短,使用 Scavenge GC 算法. ...
- 高性能Javascript(1)
第一部分 加载与运行 <html> <head> <title>Script Example</title> </head> <bod ...
- prestashop nginx rewrite rule
server { listen *:; server_name www.mydomain.com *.mydomain.com; root /var/www/www.mydomain.com/web; ...
- Warning: Function created with compilation errors.
SQL> create or replace function 2 remove_constants(p_query in varchar2) return varchar2 3 as 4 l_ ...
- 腾讯云SpringBoot部署 + HTTPS配置
springboot可以打包为jar和war,jar不多说了,最近的一个工程需要打包为war发布,大致说一下吧: 先看一下项目的大致结构: 第一步,需要排除springboot自带的tomcat插件 ...
- SDL示例一:实现七段数码管的显示
[时间:2017-05] [状态:Open] [关键词:sdl2,数字,七段数码管,图形显示,示例代码] 0 引言 本文是针对我的step-into-sdl2/7LedDigit的原理介绍,有兴趣的可 ...
- 不8000就业,不还实习费的AICODER全栈实习二期开始报名
4月17日是个伟大的日子,AICODER全栈实习一期班,正式开始!伙伴们已经撸起袖子加油干了. 二期班开始报名 二期班定于5月17日开班,从二期班开始,实习费用调整如下: 三个月模式实习费,调整为12 ...
- 【emWin】例程二十一:窗口对象——Edit
简介: 编辑框通常用作输入文本的主要用户界面,也可使用编辑字段以二进制.十进制或十六进制模式输入值. 触摸校准(上电可选择是否进入校准界面) 实验指导书及代码包下载: 链接:http://pan.ba ...