动画：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. Google上的Cookie Matching

    Cookie Matching This guide explains how the Cookie Matching Service enables you to make more effecti ...

  2. Codeforces Round #382 (Div. 2) 继续python作死 含树形DP

    A - Ostap and Grasshopper zz题能不能跳到  每次只能跳K步 不能跳到# 问能不能T-G  随便跳跳就可以了  第一次居然跳越界0.0  傻子哦  WA1 n,k = map ...

  3. java多线程学习-ThreadLocal

    为了凑字,把oracle文档里介绍ThreadLocal抄过来 public class ThreadLocal<T> extends Object This class provides ...

  4. iOS 1 到 iOS 10 ，我都快老了

    iOS 1:iPhone诞生 虽然很难想像,但初代iPhone在问世时在功能方面其实远远落后于那时的竞争对手,比如Windows Mobile.Palm OS.塞班.甚至是黑莓.它不支持3G.多任务. ...

  5. iOS改变NavigationBar的返回键和标题颜色、大小

    UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom]; [UIPubic initHeadViewBackImgWithBt ...

  6. 【转】sudo命令情景分析

    文章转自:http://www.cnblogs.com/hazir/p/sudo_command.html Linux 下使用 sudo 命令,可以让普通用户也能执行一些或者全部的 root 命令.本 ...

  7. 关于把A表中的数据复制到B表中(整理)

    如果A,B两个表中没有重复数据且表结构一样可以直接 insert into B select * from A 如果结构不一样可以 insert into B(字段列表),select 字段列表 fr ...

  8. node应用场景

    2.1 Web开发:Express + EJS + Mongoose/MySQL express 是轻量灵活的Nodejs Web应用框架,它可以快速地搭建网站.Express框架建立在Nodejs内 ...

  9. CobarClient源码分析（1）

    CobarClient是阿里巴巴公司开发一个的开源的.基于iBatis和Spring的分布式数据库访问层.为了支持iBatis,Spring框架提供了一个SqlMapClientTemplate,通过 ...

  10. 第33讲：List的一阶函数操作代码实战详解

    今天来看一下关于List的一阶函数操作 让我们看下下面的代码 println(List(1,2,3,4):::List(4,5,6,7,8):::List(10,11))//列表连接    print ...