css3-动画(animation)
css3-动画(animation):
具有以下属性:
1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成,默认值是0;
3、animation-timing-function 动画的时间曲线,linear 匀速, ease 先慢后快,结束前变慢 。
4、animation-delay 动画在启动前的延迟间隔,默认是0
5、animation-iteration-count 动画的播放次数,默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。 值:paused 指定暂停动画 ; running 指定正在运行的动画,默认。
实例:本demo以平移(translate)为例说明动画的整个过程
html:
<body>
<div class="warp"> </div>
</body>
css:
.warp{
height: 100px;
width: 100px;
border: 1px solid #eee; animation-name:moves;
animation-direction:alternate;
animation-delay: 0.2s;
animation-duration: 5s;
animation-play-state: paused;
animation-iteration-count: 3;
/*以上可以简写成:*/
animation: moves 5s linear 0.2s 3;
}
@keyframes moves{ /*动画名称自定义*/
10%{ /*时间点可以任意,10%表示当时间进行到10%是元素要达到的状态*/
transform: translate(100px,0);
-ms-transform:translate(100px,0); /*IE 9*/
-moz-transform:translate(100px,0); /* Firefox */
-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
-o-transform:translate(100px,0); /* Opera */
}
30%{ /*时间点可以任意*/
transform: translate(100px,100px);
-ms-transform:translate(100px,100px); /*IE 9*/
-moz-transform:translate(100px,100px); /* Firefox */
-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
-o-transform:translate(100px,100px); /* Opera */
}
60%{ /*时间点可以任意*/
transform: translate(0,100px);
-ms-transform:translate(0,100px); /*IE 9*/
-moz-transform:translate(0,100px); /* Firefox */
-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
-o-transform:translate(0,100px); /* Opera */
}
100%{ /*时间点可以任意*/
transform: translate(0,0);
-ms-transform:translate(0,0); /*IE 9*/
-moz-transform:translate(0,0); /* Firefox */
-webkit-transform:translate(0,0); /* Safari 和 Chrome */
-o-transform:translate(0,0); /* Opera */
}
}
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主线程 这边就不细 ...
随机推荐
- CSU 1838 Water Pump(单调栈)
Water Pump [题目链接]Water Pump [题目类型]单调栈 &题解: 这题可以枚举缺口,共n-1个,之后把前缀面积和后缀面积用O(n)打一下表,最后总面积减去前缀的i个和后缀的 ...
- jQuery显示隐藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Apache Storm Installation
安装的过程参照此处的过程介绍(https://www.tutorialspoint.com/apache_storm/apache_storm_installation.htm) 安装的过程要安装3个 ...
- Unity shader学习之Blinn-Phong光照模型
Blinn-Phong光照模型不用计算反射方向,计算公式如下: h = normalize(v + l); Cspecular = Clight * mspecular * pow(max(0, do ...
- Python全栈-day2-day3-语法基础1
1.什么是变量,为什么需要变量 变量即变化的量,衡量现实中实物的状态:程序执行的本质就是一系列的状态变化,变是程序本身执行的直接体现,因此程序的执行需要这种机制将执行状态以及状态的变化保存下来. 1) ...
- WEBGL threejs 1
首先感谢国内的这些研究者,先驱们~~~~~ 文章内容来自于webgl中文网,感谢~~~ -------------------------------------------------------- ...
- JavaScript中直接量和变量
标题 1.直接量 顾名思义,可以直接拿来使用的量.那哪些是直接量呢?数据类型又有很多种,因为不同类型的数据处理方式是不同的,所以数据要分类型 基本类型 1.1 String字符串 用单引号或双引号引起 ...
- Python - 2. Built-in Collection Data Types
From: http://interactivepython.org/courselib/static/pythonds/Introduction/GettingStartedwithData.htm ...
- Memento Mori (二维前缀和 + 枚举剪枝)
枚举指的是枚举矩阵的上下界,然后根据p0, p1, p2的关系去找出另外的中间2个点.然后需要记忆化一些地方防止重复减少时间复杂度.这应该是最关键的一步优化时间,指的就是代码中to数组.然后就是子矩阵 ...
- plsql连接远程oracle数据库
1.在oracle安装目录D:\app\Eric\product\11.2.0\dbhome_1\NETWORK\ADMIN找到tnsnames.ora:2.ORCL =(DESCRIPTION = ...