动画部分是HTML5的新增部分，其特性是可以不借助js代码就可以单单凭借着css部分完成部分动态效果。其效果华丽，强大，炫酷无比，只要你想得到的动态效果都可以通过css3来完成。

　　

<style>
.lizhi{
background: red;
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: 0;
}

.tranition{
/*transition: all 1s linear;*/
transition-property: background,margin,border-radius;/*规定渐变的属性*/
transition-duration: 1s;/*渐变的时间*/
transition-timing-function:linear;/*匀速渐变*/
}

.lizhi:hover{background: yellow;
border-radius: 50% 50%;
margin-left: 60px;}
</style>
<body>
<div class="lizhi tranition">

</div>
</body>

以上部分就是代码，可以看出这里面并没有引入js。

动态效果全部在.tranition这个类里面

第一句：transition: all 1s linear;

这一句是简写，代表所有属性都可以调整，在1秒中执行完毕，执行速度为匀速

下面的几句：

transition-property代表属性，属性之间用逗号隔开，在这里没有声明的属性是不会有渐变效果的，例如如果将background去掉，那么当鼠标放上去的瞬间，这个div的颜色就会改变，而其他的属性则继续延迟执行。

transition-duration代表执行时间，一个完整地动画所需要的时间。

transition-timing-function代表运行时的速度，这个速度由来是根据贝塞尔函数来的，其中可选择由快到慢，由慢到块，匀速，或者自定义等等。

动画——animation部分的更多相关文章

  1. 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

    × 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...

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

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

  3. 精灵动画Animation对话框组成Idle动画的各精灵

    精灵动画Animation对话框组成Idle动画的各精灵 1.3  精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...

  4. Qt-4.6动画Animation快速入门三字决

    Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟 ...

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

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

  6. Android 动画animation 深入分析

    转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...

  7. View 动画 Animation 运行原理解析

    这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)这些动画运行的流程解析.内容并不会去分析 ...

  8. CSS3动画属性：动画(animation)

    一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...

  9. 《The Cg Tutorial》阅读笔记——动画 Animation

    这段时间阅读了英文版的NVidia官方的<The Cg Tutorial>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...

  10. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

随机推荐

  1. 多线程---优先级&yield方法

    优先级只有10级,1-10.最高10(java中用Thread.MAX_PRIORITY),最低1,中间级5. 设置优先级的方法是 线程对象.setPriority(5): yield : 暂停(不是 ...

  2. tomcat的事件监听

    //事件涉及的三个组件:事件源.事件对象.事件监听器 //一个总的事件监听器接口,所有不同分类的事件监听器都继承这个接口 public interface EventListener {} //例如  ...

  3. elipse图标注解

    Java中的访问修饰符(访问控制符)包括:public,protected,default,private.分别代表了不同的访问权限.如果省略,则被视为使用了默认的default作为访问修饰符.从字面 ...

  4. HBase数据的导入和导出

    查阅了几篇中英文资料,发现有的地方说的不是很全部,总结在此,共有两种命令行的方式来实现数据的导入导出功能,即备份和还原. 1 HBase本身提供的接口 其调用形式为: 1)导入 ./hbase org ...

  5. 学习笔记——责任链模式ChainOfResponsibility

    责任链模式,主要是通过自己记录一个后继者来判断当前的处理情况.Handler中,再增加一个方法用于设置后继对象,如SetHandler(Handler obj). 然后Handler类以其子类的处理方 ...

  6. 拦截asp.net输出流做处理, 拦截HTML文本（asp.net webForm版)

    对已经生成了HTML的页面做一些输出到客户端之前的处理 方法的原理是:把Response的输出重定向到自定义的容器内,也就是我们的StringBuilder对象里,在HTML所有的向页面输出都变 成了 ...

  7. leetcode383

    已知两个字符串,然后比较一个字符串是否来自另一个字符串,没有顺序要求. 简单题,用一个数组保存前一个字符串的每一个字符出现的次数,然后循环后一个字符串去检查,如果次数不够了,那么就返回false pu ...

  8. C#未将对象引用设置到对象的实例

    未将对象引用设置到对象的实例,这个错误的意思是对象为null,但你还要去取里面的值,所以计算机就不干了.解决办法一般是:用一个你不能确定是不是为null的对象时,尽量做个判断.if(object!=n ...

  9. 编写程序，从vector<char>初始化string

    #include<iostream> #include<string> #include<vector> using namespace std; int main ...

  10. LeetCode OJ 219.Contains Duplicate 2

    Given an array of integers and an integer k, find out whether there are two distinct indices i and j ...