动画：animation

  animations这物似乎还是只在webkit，moz核心的浏览器上起作用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">

@-moz-keyframes resize{
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(190, 206, 235, 0.2);
}
100% {
padding: 0 100px;
background-color:rgba(190, 206, 235, 0.9);
}
}
/* Safari 和 Chrome */
@-webkit-keyframes resize {
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(190, 206, 235, 0.2);
}
100% {
padding: 0 100px;
background-color:rgba(190, 206, 235, 0.9);
}
}
.anim_box:hover {
-moz-animation-name: resize;/*给动画起名字*/
-moz-animation-duration: 1.5s;/*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
-moz-animation-iteration-count: 4;/*鼠标悬停时动画只执行4次。*/
-moz-animation-direction: alternate;/*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/
-moz-animation-timing-function: ease-in-out;/*规定动画的速度曲线。默认是 "ease"。*/
-webkit-animation-name: resize;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;

}
.test_box{ width:100px;height:100px; background-color:rgba(190, 206, 235, 1);border:1px solid black;}
</style>
</head>
<body>
<div class="anim_box test_box"></div>
</body>
</html>

css3动画animation的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  5. CSS3动画animation认识，animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  7. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

随机推荐

  1. [转载]Altium规则详解及设置

    在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...

  2. Hibernate个人学习笔记(1)

    连接池c3p0所需jar包:Hiberbate开发包-lib-optional-c3p0下全部Jar包 Hiberbate连接池参数配置:Hiberbate开发包-project-etc-hibern ...

  3. TNetHTTPClient演示

    TNetHTTPClient演示 TNetHTTPClient是DELPHI新增加的异步HTTP通信控件(区别于INDY的阻塞控件). unit Unit1; interface uses Winap ...

  4. 对象转型 casting

    一个基类的引用类型变量可以"指向"其子类对象. 一个基类的引用不可以访问其子类对象新增加的成员(属性和方法). 基类强制转型成子类,则能访问子类独有的成员. 可以使用 引用变量in ...

  5. DL4J (DeepLearning for java)

    http://deeplearning4j.org/lstm.html A Beginner’s Guide to Recurrent Networks and LSTMs Contents Feed ...

  6. lua中for循环的四种遍历方式

    lua中for的四种遍历方式区别 table.maxn 取最大的整数key #table 从1开始的顺序整数最大值,如1,2,3,6 #table == 3   key,value pairs 取每一 ...

  7. [学习笔记] 七步从AngularJS菜鸟到专家（6）：服务 [转]

    这是＂AngularJS – 七步从菜鸟到专家＂系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们 ...

  8. Hyper-V 共享式网络链接 端口映射

    远程路由访问我配置了很久都不成功,经过多方搜索,现面的命令能实现端口映射一.查询端口映射情况netsh interface portproxy show v4tov4查询这个IP所有的端口映射.net ...

  9. Android学习--摘录

    今天准备开始毕业设计--做一个android应用.无奈android基础木有一点,以前做过一个蓝牙应用,不过对android各方面的知识还是不懂啊,今天在android主页上看英文的android开发 ...

  10. Repeater 使用方法

    ItemTemplate: 包含要逐一呈现给数据源中的每个数据项的 HTML 元素和控件 AlternatingItemTemplate: 包含要逐一呈现给数据源中的其他每个数据项的 HTML 元素和 ...