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 动画. 废话少说,直接进入正题,本文提到 ...
随机推荐
- HTML和CSS中判断IE版本并实现相应HTML和CSS
在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了. 1.HTML代码中 经过本人测试,在HTML代 ...
- JNI学习小结
Java中类型与C/C++中对应关系 Java中的类的对应 Sign签名, 用来识别对应各个方法. JDK下的javap.exe能输出签名.用法javap -s -p 完整类名 下面是 ...
- Memcache及telnent命令具体解释
1.启动Memcache 经常使用參数 memcached 1.4.3 -p <num> 设置port号(默认不设置为: 11211) -U <num> U ...
- 使用Guava的ComparisonChain实现自定义的排序
可以看到使用比较器前,先要写一个实体类,还要实现comparable接口,实现compareTo方法.这个方法一般会返回-1 0 1三个int类型数字,分别表示,对象和传入的对象比较,排序应该在传入的 ...
- R绘制3D散点图
目前主要使用ggplot2做一些数据可视化的分析,但是ggplot2有个很大的缺陷是不支持3D作图,所以需要查找其他替代方案. 下面找到的两个替代方案不错,亲测可行,记录于此. 交互3D librar ...
- Socket网络编程--聊天程序(3)
上一小节,已经讲到可以每个人多说话,而且还没有限制,简单的来说,我们已经完成了聊天的功能了,那么接下来我们要实现什么功能呢?一个聊天程序至少应该支持一对多的通讯吧,接下来就实现多个客户端往服务器发送数 ...
- Diocp截图
跑了个数据库的查询和插入,删除. Http SVR DEMO http://123.232.98.202:8081/
- Ubuntu18.04启用中文输入法
Ubuntu18.04发布了,但是搜狗输入法目前尚未支持. 而18.04自带的中文输入法选择sunpinyin为预设中文输入引擎,但是并没有将sunpinyin放入iso镜像中.详情参考https:/ ...
- 【Java】forward & redirect 的差异
1.从地址栏显示来说 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来的,所以它的地 ...
- Java知多少(11)数据类型转换
数据类型的转换,分为自动转换和强制转换.自动转换是程序在执行过程中“悄然”进行的转换,不需要用户提前声明,一般是从位数低的类型向位数高的类型转换:强制类型转换则必须在代码中声明,转换顺序不受限制. 自 ...