css3动画参数解释
@keyframes
规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
------------------------------------------------------------------------------------
animation-name 规定 @keyframes 动画的名称。
--
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
--
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
cubic-bezier贝塞尔曲线(动画播放速度曲线)可参考贝塞尔曲线
--
animation-delay 规定动画何时开始。默认是 0。
--
animation-iteration-count 规定动画被播放的次数。默认是 1。
infinite无限次播放
--
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
normal
alternate动画轮流反向播放
--
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
paused暂停
running正在播放
--
animation-fill-mode 规定对象动画时间之外的状态。
none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。
css3动画参数解释的更多相关文章
- jQuery插件css3动画模拟confirm弹窗
相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...
- CSS3动画详解(超详细)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- CSS3动画详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- jquery实现css3动画
jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...
随机推荐
- System.map文件【转】
转自:http://blog.csdn.net/david104/article/details/7194185 当运行GNU链接器gld(ld)时若使用了"-M"选项,或者使用n ...
- CSS3 笔记二(Gradients)
CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial ...
- 005_重写 Standard Delete Button
以后会用JS直接删除,但是在加载.js时候出现问题,会在以后进一步追踪完善: <apex:page standardController="Opportunity" > ...
- UI图标资源搜索
下面这些网站可以搜索图标资源,方面界面制作: 分享下http://www.tutorialcadet.com/20-user-interface-icon-sets-for-developers/下面 ...
- 5. 网络配置与FTP服务笔记
IP地址: Ipv4 2*32 Ipv6 tcp 网络通讯协议 udp 用户数据报协议 常见网络端口: 20 21 ftp服务 文件共享 22 ...
- HTML纯javaScript代码写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 对c++ public、protected、private关键字的理解
首先要明确一下: 1.这三个关键字在两种地方会用到,一个是对类的成员变量和成员函数修饰时(比如私有的成员变量,受保护的成员变量·,公有的函数),还有一种是对继承方式的修饰(比如公有继承,保护继承). ...
- 有向图的强连通分量的求解算法Tarjan
Tarjan算法 Tarjan算法是基于dfs算法,每一个强连通分量为搜索树中的一颗子树.搜索时,把当前搜索树中的未处理的结点加入一个栈中,回溯时可以判断栈顶到栈中的结点是不是在同一个强连通分量中.当 ...
- HQL查询——HQL查询的基本用法
HQL查询--HQL查询的基本用法 1.HQL语法类似于SQL语法,但是需要注意的是,HQL是一种完全面向对象的查询语言.SQL语言操作的对象是数据表.列等数据库对象,而HQL语言的操作对象是类.实例 ...
- 编辑距离——Edit Distance
编辑距离 在计算机科学中,编辑距离是一种量化两个字符串差异程度的方法,也就是计算从一个字符串转换成另外一个字符串所需要的最少操作步骤.不同的编辑距离中定义了不同操作的集合.比较常用的莱温斯坦距离(Le ...