动画部分是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. ESFramework 4.0 快速上手（06） －－ Rapid引擎（续）

    <ESFramework 4.0 快速上手>系列介绍的都是如何使用Rapid引擎(快速引擎) -- RapidServerEngine 和 RapidPassiveEngine.其实,大家 ...

  2. aspnet5安装ef7备忘

    1.安装kvm 首先,你需要以管理员权限打开cmd,执行如下的脚本: @powershell -NoProfile -ExecutionPolicy unrestricted -Command &qu ...

  3. [ An Ac a Day ^_^ ] UVALive 2635 Housing Complexes 二分图最大匹配

    快要比赛了 看看原来做过的题 感觉这道题当时做的还是挺费劲的 所以发一下 题意: 一个土豪要建别墅 因为有的地区地方不够大 所以要拆屋子 每个地方的字母就是对应开发商的地盘 没有字母的就是自由土地 一 ...

  4. Openjudge-计算概论（A）-整数奇偶排序

    描述: 输入10个整数,彼此以空格分隔重新排序以后输出(也按空格分隔),要求:1.先输出其中的奇数,并按从大到小排列:2.然后输出其中的偶数,并按从小到大排列.输入任意排序的10个整数(0-100), ...

  5. kvstore之memcached为存储介质

    ecstore中kvstore选用memcached作为存储介质 kvstore存储类选用base_kvstore_memcached(app/base/lib/kvstore/memcached.p ...

  6. xTiNt 论坛发帖辅助软件 1.0 绿色版

    软件名称:xTiNt 论坛发帖辅助软件 1.0 绿色版软件语言: 简体中文授权方式: 免费软件应用平台: Win7 / Vista / Win2003 / WinXP / Win2008 软件大小: ...

  7. laravel性能优化

    1. 配置信息缓存 使用以下 Artisan 自带命令,把 config 文件夹里所有配置信息合并到一个文件里,减少运行时文件的载入数量: php artisan config:cache 上面命令会 ...

  8. do循环的100米自由落体

    #include "stdio.h" void main() { float h=100.0,sum=100.0; ; do { sum=sum+h; h=h/; g++; }); ...

  9. Python基础学习7---异常处理

    处理异常 我们可以使用 try..except 语句来处理异常.我们把通常的语句放在try-块中,而把我们的错误处理语句放在except-块中. import sys try: s = raw_inp ...

  10. IntelliJ IDEA 部署远程服务

    今天产品遇到个本地无法重现,服务器上却出现的 Bug. 想起来 IDEA 有远程调试的功能就拿来用用. 教程如下: 1. 创建 tomcat service 2. 填入服务器的 IP 和端口 3. 确 ...