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主线程 这边就不细 ...
随机推荐
- Python中with...as的用法
原文:http://blog.csdn.net/magicharvey/article/details/20226969 这个语法是用来代替传统的try...finally语法的. with EXPR ...
- Windows窗体间的数据交互
轻松掌握Windows窗体间的数据交互 作者:郑佐 2004-04-05 Windows 窗体是用于 Microsoft Win ...
- Apache日志解读
想要知道什么人在什么时候浏览了网站的哪些内容吗?查看Apache的访问日志就可以知道.访问日志是Apache的标准日志,本文详细解释了访问日志的内容以及相关选项的配置. 一.访问日志的格式 Apac ...
- Oracle 11g R2安装手册(…
1.Oracle 11g R2安装手册(图文教程)For Windows 1.下载Oracle 11g R2 for Windows版本,下载地址如下官方网站:http://download.orac ...
- 慕课网java就业班级
家里电脑教程路径: F:\教程\java-慕课 开发工具路径: D:\java 公司电脑:开发工具路径 J:\java\开发工具 教程路径: G:\学习中\廖雪峰的java教程\1-Java快速入门\ ...
- QMYSQL driver not loaded 的原理和解决办法
转:http://blog.csdn.net/m15814478834/article/details/49902077 最近使用Qt遇到了"QMYSQL driver not loaded ...
- Spring IOC 的源码分析
刚学习Spring的时候,印象最深的就是 DispatcherServlet,所谓的中央调度器,我也尝试从这个万能胶这里找到入口 configureAndRefreshWebApplicationCo ...
- Docker学习:virtualbox安装和配置
下载.安装 从官网:https://www.virtualbox.org/下载,根据说明直接一步步安装即可 安装ubuntu 说明:这里本机内存是16G,若内存<4G安装完成虚拟机, 安装完成之 ...
- CODING 告诉你硅谷的研发项目管理之道系列(6)
写在前面 优秀的研发管理者是怎么工作的,如何更加高效地管理研发团队?这些一直是 CODING关注的重要话题,我们不断地打磨 CODING 研发系统来让开发更简单.近期我们精心挑选了几篇硅谷科技公司研发 ...
- 【SpringBoot】编写一个自己的Starter
一.什么是Starter? 在开发过程中我们就经常使用到各种starter,比如mybatis-spring-boot-starter,只需要进行简单的配置即可使用,就像一个插件非常方便.这也是Spr ...