css3动画:animation
例:
-webkit-animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s linear 2s infinite alternate; @keyframes myfirst{
from{background:red;}
to{background:yellow;}
}
@-webkit-keyframes myfirst{
frome{background:red;}
to{background:yellow;}
}
//或者
@keyframes myfirst{
0%{ }
25%{ }
50%{ }
100%{ }
}
参数及含义:
animation-name: 动画的名字
animation-duration: 动画完成一个周期所花费的秒数,默认是0
animation-timing-function: 规定动画的速度曲线,默认是ease(动画以低速开始,然后加块,在结束前变慢);
linear(动画从头到尾的速度是相同的)
ease-in(动画以低速开始)
ease-out(动画以低速结束)
ease-in-out(动画以低速开始和结束)
animation-delay: 规定动画何时开始,默认是0;
animation-iteration-count: 规定动画被播放的次数,默认是1, infinite(无限循环)
animation-direction: 规定动画是否在下一周期逆向地播放,默认是normal(不逆向播放)
reverse(动画反向播放)
alternate(动画在奇数1,3,5、、、正向播放,在偶数2,4,5、、、反向播放)
alternate-reverse(动画在奇数次1,3,4、、、反向播放,在偶数次2,4,6、、、正向播放)
css3动画:animation的更多相关文章
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3动画详解(结合实例)
一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...
随机推荐
- 洛谷P3252 [JLOI2012]树
题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度是0,它的儿子节点的深度为1.路径不 ...
- express使用https
目录 申请免费ssl证书 修改express的./bin/www 申请免费ssl证书 直接去阿里云申请一个免费的ssl,选择neginx下载证书就可以了,解压得到一个xxx.key.xxx.crt文件 ...
- SpringMVC 全注解实现 (1) servlet3.0以上的容器支持
一. Spring MVC入门 1.1 request的处理过程 用户每次点击浏览器界面的一个按钮,都发出一个web请求(request).一个web请求的工作就像一个快递员,负责将信息从一个地方运送 ...
- Jasper:目录/资源
ylbtech-Jasper:目录/资源 1. 官网返回顶部 1. https://www.jasper.com/ 2. 2.返回顶部 1. http://api.jasperwireless.com ...
- FlexPaper+SwfTools实现的在线文档功能
最近一个项目需要实现一个在线浏览文档的功能.准备使用FlexPaper配合Pdf2Swf实现. 主要需求在于: ➔ 文档页数很多,少则几百页,多则上千页. ➔ 相应的文档大小也在50MB以上. ...
- linux命令配置IP详解
在Linux系统中,TCP/IP网络是通过若干个文本文件进行配置的,有时需要编辑这些文件来完成联网工作. vi /etc/sysconfig/network-scripts/ifcfg-eth0 :进 ...
- Linux下磁盘加密luks使用
使用luks加密磁盘,磁盘需要映射才可以挂载,映射的时候需要输入密码验证.luks相对于是对硬盘上了一把锁,要想打开就得有相应的钥匙,如果打开了就可以随意操作了,和普通硬盘一样. 使用方法如下: 0. ...
- go实现冒泡排序和快速排序
项目结构 冒泡排序算法,源文件bubblesort.go package bubblesort // 冒泡排序 func BubbleSort(values []int) { for i := 0; ...
- 牛客多校2 D-money(dp记录/贪心)
D-money 链接:https://www.nowcoder.com/acm/contest/140/D来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K, ...
- dual 视图模拟 Oracle
CREATE OR REPLACE VIEW dual ASSELECT NULL::"unknown"WHERE 1 = 1;