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的更多相关文章

  1. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  2. 关键帧动画:@keyframes

    关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  4. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  5. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  6. css动画结束后 js无法修改translated值 .

    由于项目的需要,俺要做一些页面的转场动画. 即将是移动端,肯定是首先css动画了. 结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性trans ...

  7. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

随机推荐

  1. jsp使用c:forEach报错 javax.servlet.jsp.PageContext.getELContext()Ljavax/el/ELContext的问题

    今天发现了一个折磨我一天的问题: 在jsp文件中使用 <c:forEach items="${checkResult}" var="item"> & ...

  2. 简单JNI使用demo

    android中使用JNI的小例子,直接上代码. 首先是Java类JniClient,定义native方法,User实体类就不上代码了,就简单定义了三个属性,name.age.sex. package ...

  3. V8 下的垃圾回收机制

    V8 实现了准确式 GC,GC 算法采用了分代式垃圾回收机制.因此,V8 将内存(堆)分为新生代和老生代两部分. 1.新生代算法 新生代中的对象一般存活时间较短,使用 Scavenge GC 算法. ...

  4. 高性能Javascript(1)

    第一部分 加载与运行 <html> <head> <title>Script Example</title> </head> <bod ...

  5. prestashop nginx rewrite rule

    server { listen *:; server_name www.mydomain.com *.mydomain.com; root /var/www/www.mydomain.com/web; ...

  6. Warning: Function created with compilation errors.

    SQL> create or replace function 2 remove_constants(p_query in varchar2) return varchar2 3 as 4 l_ ...

  7. 腾讯云SpringBoot部署 + HTTPS配置

    springboot可以打包为jar和war,jar不多说了,最近的一个工程需要打包为war发布,大致说一下吧: 先看一下项目的大致结构: 第一步,需要排除springboot自带的tomcat插件 ...

  8. SDL示例一:实现七段数码管的显示

    [时间:2017-05] [状态:Open] [关键词:sdl2,数字,七段数码管,图形显示,示例代码] 0 引言 本文是针对我的step-into-sdl2/7LedDigit的原理介绍,有兴趣的可 ...

  9. 不8000就业,不还实习费的AICODER全栈实习二期开始报名

    4月17日是个伟大的日子,AICODER全栈实习一期班,正式开始!伙伴们已经撸起袖子加油干了. 二期班开始报名 二期班定于5月17日开班,从二期班开始,实习费用调整如下: 三个月模式实习费,调整为12 ...

  10. 【emWin】例程二十一:窗口对象——Edit

    简介: 编辑框通常用作输入文本的主要用户界面,也可使用编辑字段以二进制.十进制或十六进制模式输入值. 触摸校准(上电可选择是否进入校准界面) 实验指导书及代码包下载: 链接:http://pan.ba ...