动画：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. 双等位基因(biallelic sites )和多等位基因(multiallelic sites)

    双等位基因(biallelic sites ):表示在基因组的某个位点上有两个等位基因,如下图第七个位点所示,有G/-两种形式: 多等位基因(multiallelic sites):表示在基因组的某个 ...

  2. Visual Studio 必备神器

    会使用工具是人类文明的一大进步,今天敏捷大行其道,好的工具可以大大的提高生产力,这里说的工具都是VS平台上的扩展工具,一些机械的部分可以交给工具去处理,自己多关注其他部分.下面分享下我觉得不错的工具, ...

  3. js获取当前页面信息

    设置或获取对象指定的文件名或路径.<script>alert(window.location.pathname)</script> 设置或获取整个 URL 为字符串.<s ...

  4. const限定符

    1 const的作用 便于进行类型检查.可以保护被修饰的东西.避免不必要的内存分配.为函数重载提供一个参考. 2 const成员函数 const成员函数只能访问数据成员的值,而不能修改他. #incl ...

  5. 第一章 Mybtais的两种启动方式

    Mybatis的两种启动方式如下: 1.xml实现: xml的实现方式中,主要是通过手动创建SqlSession,然后调用session.selectOne()方法实现来实现. 首先是创建Config ...

  6. 从DNS配置

    从服务器可以从主服务器上抓取指定的区域数据文件起到备份解析记录和负载均衡的作用. 主DNS服务器IP:192.168.16.20 从DNS服务器IP:192.168.16.30 1,修改主服务器区域配 ...

  7. SQL删除重复数据

    --首先将不是重复的数据提取出来,保存到一个临时表中 select distinct * into #temp from JX_Score --然后删除原来的表 delete from JX_Scor ...

  8. Linux下cutecom使用USB转串口线

    http://www.cnblogs.com/pang123hui/archive/2011/05/29/2309888.html 在Linux下的串口调试一直使用minicom,虽说Linux的精髓 ...

  9. [vb.net]判断窗体是否已打开

    1.使用OpenForms if my.Application.OpenForms.Item("FormName") isnot nothing then搜索 do somethi ...

  10. PHP 判断数组是否为空的5大方法

    1. isset功能:判断变量是否被初始化 说明:它并不会判断变量是否为空,并且可以用来判断数组中元素是否被定义过 注意:当使用isset来判断数组元素是否被初始化过时,它的效率比array_key_ ...